本文目录
用vue生成svg，保存和修改
前端本身不具备操作本地文件的能力。只有配合后端才能做到。就是说需要将你的SVG通过AJAX传给后端，后端将你的文件保存到服务器目录下。后端也可以把文件传到前端，交由前端进行。但是文件保存只有后端才能操作
D3中的绘图区域是什么
D3中的绘图区域是什么？D3（Data-DrivenDocuments）是一个用于数据可视化的JavaScript库。它可以通过数据驱动的方式创建各种类型的图表，包括折线图、条形图、散点图等。在D3中，绘图区域是指用于放置图形的区域。了解D3中的绘图区域对于使用该库创建图表非常重要。给定一个svg元素，可以在其中创建一个绘图区域。SVG是可伸缩矢量图形的缩写，它是一种XML文档类型，可以用于在Web上创建图形。在D3中，通常使用svg元素来创建各种类型的图表。在D3中，可以使用d3.select()函数选择SVG元素，然后使用append()函数向其中添加一个绘图区域。例如：`varsvg=d3.select(body).append(svg).attr(width,500).attr(height,500);varchart=svg.append(g).attr(class,chart).attr(transform,translate(+margin.left+,+margin.top+));`此代码将创建一个SVG元素，将其添加到页面的body元素中，并设置其宽度和高度为500。然后，将创建一个名为chart的g元素，并将其添加到SVG中。绘图区域位于这个g元素中。在绘图区域中，可以使用D3的各种方法来创建图表。例如，可以使用以下代码创建一个简单的折线图：`vardata=;varx=d3.scaleLinear().domain().range();vary=d3.scaleLinear().domain().range();varline=d3.line().x(function(d,i){returnx(i);}).y(function(d){returny(d);});chart.append(path).datum(data).attr(class,line).attr(d,line);`这段代码首先定义了一个包含数据的数组。然后，定义了x比例尺和y比例尺，用于将数据映射到坐标轴上。接下来，创建一个名为line的d3.line对象，用于绘制折线。最后，将折线添加到绘图区域中。总之，在D3中，绘图区域是指用于放置图形的区域。可以通过SVG元素及其子元素来创建绘图区域，并利用D3的各种方法来创建图表。
如何使用Android的VectorDrawable类绘制矢量图
绘制矢量图形非难事——如何使用Android的VectorDrawable类内容概述尽管Android系统并不能够直接支持SVG（即可缩放矢量图形），但Lollipop版本却引入了一个名为VectorDrawable的新类，其允许设计人员及开发人员以纯代码方式生成类似的绘制效果。在今天的文章中，我们将共同学习如何利用XML文件创建一个VectorDrawable，并将其以动画方式显示在自己的项目当中。这项功能只能在运行有Android5.0或者更高版本的设备上实现，而且目前还不具备任何支持库实现。本篇教程中的相关源文件可以通过GitHub网站获取。1.创建VectorDrawable从相似角度来看，VectorDrawable与标准SVG图形都是利用path值绘制完成的。不过如何利用SVGpath绘制图形并不在本篇文章的探讨范围之内，大家可以点击此处从W3C网站处获取必要的说明资料。在本文当中，我们只需要了解到path标签的作用是进行图形绘制即可。让我们首先从SVG文件入手，看看以下图形是如何被绘制出来的：这一图形共由五个主要部分所组成：一个圆角四边形作为CPU主体，该四边形由两条拱状弧线构成。四组各自包含五根线条的图形，用于充当CPU的外延线路。以下代码所示为如何以SVG方式绘制以上图形：虽然看起来有点繁杂，但大家其实用不着纠结于以上代码的具体含义，而且这完全不会影响到我们接下来要进行的VectorDrawable绘制工作。不过需要强调的是，我将前面提到的五大图形组成部分在代码中作为独立的区块来处理，这是为了增强代码内容的可读性。首先，我们需要利用两条拱形弧线来绘制出圆角四边形，而在接下来的内容中我们会探讨如何分别表现出上、下、左、右四个方位的外延线条。为了将上述SVG代码转化为VectorDrawable，大家首先需要在XML当中定义vector对象。以下代码提取自本篇文章示例代码当中的vector_drawable_cpu.xml文件。在此之后，大家可以向其中添加path数据。下列代码同样被拆分成了五个不同的path标签而非将其作为整体处理，这当然也是为了保证内容的可读性。正如大家所见，每个path片段都只需要利用pathData属性进行绘制。现在我们可以将VectorDrawableXML文件作为一个可绘制对象纳入到标准ImageView当中，而且其能够根据应用程序的实际需要任意进行尺寸缩放——完全不需要再修改任何Java代码。2.为VectorDrawables添加动画效果现在我们已经了解了如何以纯代码方式创建图形，接下来要做的是找点乐子——为其添加动画效果。在以下动画中，大家会发现作为延伸线路的各组线条会不断指向并远离CPU本体进行移动。为了达到这一目标，大家需要将包含动画效果的每个片段包含在一个标签当中。经过修改的vector_drawable_cpu.xml版本将如下所示：接下来，我们需要为每个动画类型创建animator文件。在本次示例中，每组线路各使用一个animator，这就意味着共需要四个animator。以下代码所示为上方线路的动画效果，大家还需要为下、左、右线路设定类似的效果。每个animatorXML文件都被包含在了本项目的示例代码当中。如大家所见，propertyName被设定为translateY，这意味着该动画将沿Y轴方向移动。而valueFrom与valueTo则控制着位移的起点与终点。通过将repeatMode设置为reverse而repeatCount设置为infinite，整个动画会一直循环下去，其效果则在VectorDrawable处体现出来。该动画的duration被设定为250，其时长单位为毫秒。为了将该动画应用到自己的可绘制文件当中，大家需要创建一个新的animated-vectorXML文件，从而将这些animator分配给各VectorDrawable组。以下代码的作用是创建该animated_cpu.xml文件。
adobexd导出的svg代码html
adobexd导出的svg代码html，使用adobeacrobat专业软件导出整个页面:点击file，然后点击save as…再保存类型设置为JPEG，保存一个，然后取出图像，点击高级，然后导出所有图像，最后再保存。
