svg可以转成canvas，canvas再转！
var svgHtml = svgContainerinnerHTML();//获取svg将svg转成canvas需要用到google的一个插件canvg，可以上官网下载
接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas，这个方法第一个参数就是canvas标签的id!
var imgSrc = documentgetElementById(content)toDataUrl("image/png");//将canvas转成基本思路是在卫星地图中获取路线后，将其截图。在ARCGIS中将图配准（即配准经纬度），下一步是矢量化你所要的路线，即可获得shp格式的线了，线上的经纬度坐标自然就出来了。这方法的经度肯定要打折扣，不同范围的图有不同程度的误差。希望能帮到你，同意请采纳。
本文是学习和使用svg的一些总结，不介绍svg作图的方法。
svg标签元素参考： MDN - svg
结构化标签也可参考： SVG中的结构化、分组和引用元素
svg的icon方案，参考： 腾讯干货！超实用的高清图标SVG解决方案全总结（下）
svg与普通html元素不同，需要指定命名空间，所以使用 createElement() 、 appendChilde() 抑或JQ的 append() 方法添加到dom上的svg元素是无法正常显示的。需要用到 createElementNS(ns,'svg') ，另外有些svg标签也需要单独的命名空间，例如a标签。为了避免每次添加这么长的命名空间，使用时可以简单包装下( NS_SVG 、 NS_XLINK 分别为svg和a标签命名空间)：
SVG如果是嵌套在HTML中的话，即使用svg标签，会和其他dom元素共用一个document对象，因此可以直接通过该对象来获取到SVG元素对象；如果使用object、embed、iframe标签来引入svg,则其中的内容会有自己document对象，此时的 *** 作需要借助 getSVGDocument() 方法：
对于object、iframe来引入的svg对象，还可以使用 contentDocumnet 属性来获取。当然，contentDocument不是专为svg设计的，同时可以获取其他内嵌xml、html对象。
*** 作的前提需要满足 同源策略(Same-origin policy) ，跨域将无法获取document对象。
平移和缩放表面看起来很简单，svg的平移缩放机制也不复杂，但是dom元素往往不固定宽度，应用场景也多变。例如有时候我们希望随浏览器响应，svg按照比例自动缩放；有时候我们希望为svg添加手动缩放功能或者手动拖拽平移功能（类似于百度地图的缩放平移机制）。
关于svg的viewBox相关知识，张鑫旭有篇文章讲的很详细： 理解SVG viewport,viewBox,preserveAspectRatio缩放 。这里谈谈在具体的应用场景中如何利用这些属性。
最近因为工作需要做了点HTML5可视化研究如下
为什么没有字体颜色作为一个设计师很不爽
第一次发文有写错的地方还请诸位高手多多包涵
设想，要在页面中生成大量的简单图形，比如10万个方块，并对它们进行拖拽 *** 作。
基本思路有三种方式，传统Div，Svg，与Canvas。
为了加拖拽，暂时没有用canvas。
因为canvas无法生成dom节点，不存在id这种属性，需要通过判断鼠标位置来获取元素再进行 *** 作。虽然写个isMouseinObj()的function也不是不行，但总觉得以后针对某对象单独处理会夜长梦多（主要还是懒）。。。不过从生成图形角度讲，canvas理论上是最快的。
因为贪生怕死担心Dom过多死机，准备先分区生成方块，于是：
一个简图，整体划分如下，设两个input框的值分别为m, n，每个蓝块包括n个绿块。点击每个蓝块可在下方生成n个绿块。
点击GenAll可一次性生成mn个绿块。点击Drag可对绿块进行拖拽。
模拟开始。
首先是用div模拟方块。因为比较熟悉写起来也简单。
Div的拖拽方式可以分成两种。
Jquery-ui的draggble还有很多其他参数，请参考api文档。
现在假定一种新情形：绿色方块只能拖拽到虚线框之内。
默认情况下，Html元素均不可拖拽，所以需要设置拖拽元素的draggable属性为true。同时，默认无法将元素放置到其他元素中，所以需要eventpreventDefault()设置允许放置。
本例中，为class为abox的绿方块添加draggable。
为class为wrap的虚线框添加preventDefault。
之后通过dataTransfer传输数据，实现box的移动。
由于Svg也是直接在Html中生成Dom节点，理论上Div所能实现的功能它都可以实现，并且绘图效果更佳。
然后生成Svg元素，并设置其属性。
循环生成Svg方块并添加拖拽属性。
但这种方式有个问题，就是——慢。当生成仅10000个方块时，效率便低的不可估量。
然而Svg无法应用Html5原生的Drag and Drop事件。
相比于引用插件，这样的效率提高了不少。
从结果上看，在数量少时，针对方块这种简单图形的简单 *** 作Div和Svg均可胜任。然而设置了总共生成100000个方块，发现单从生成的角度，Svg的渲染用时大约是Div的1/2（这里指Dom中直接绘制Svg而非通过js插件绘制Svg）。
加上拖拽功能后，用Html5原生拖放事件的Div，及用鼠标事件的Svg，明显快快快快于应用js插件拖放的效率。于是乎插件虽然强大但对于大量节点的处理实在过于缓慢。
于是在图形化上还是应用Svg更舒畅一些。
但有一个尚未解决的问题。
应用鼠标事件拖动Svg，当鼠标移动过快时，mousemove事件无法触发，导致移动效果不能实现。粗略查了下似乎可以添加透明背景层接收所有触发事件，不过还没有深入研究。
这篇就到此吧。等解决了mousemove的bug再更新后续。
(´・ω・`)
在之前的项目中需要用到D3来绘制可视分析视图，参考了一些例子之后，能够依葫芦画瓢。但是想要自己创作的时候却感受到了技术上的瓶颈。以我对D3粗浅的理解，认为其是基于SVG的lib，即D3中图像的绘制的基础就是SVG，工欲用D3，必先理解SVG。遂决定先补一补SVG的知识。讲的不会很具体，主要是概念上的东西。
接下来主要涉及到的有：
栅格化的图像则是把原来一个像素点放大，这样会导致放大之后的糊啦。而svg是矢量图，矢量图就是不论放大多少倍，他都不会变形变模糊。这是怎么做到的呢？来自于矢量图的放大就是把形状坐标的值按倍数变大，重新绘制就完事了。所以说，svg绘制的关键就在于坐标点的确定。当我在画一个svg的时候，我其实要找的就是能够确定这个svg图像的坐标点。
画画要纸，画SVG则要画布。画布就是这个SVG元素。 width 和 height 的指定单位可以是 px em 百分比 。
画布有一个默认的坐标系。
绘制的时候，如果遇到了需要旋转、缩放、移动的情况。其实并不是对元素本身的坐标进行计算然后改变，而是将元素的坐标系进行变换，变换完毕之后，在新的坐标系去绘制图像。这样做的好处是让数学计算变得更加简单。毕竟坐标系可以近似看作一个长方形，变换起来计算量并不会太大，相反，如果是对图形变换，绘制一个奇形怪状的东西，则对每一个坐标进行变换计算，就非常可怕了（类似一个复合函数的计算，为了简化先算外层再算内层一般）。
path 就相当于你画的每一笔。绘制的过程就是行笔的过程。笔的连线由坐标点去控制。
一些常用的图形如 circle rect line 等，是可以直接使用的，只要给它设置了它接受的参数。
贝塞尔曲线对于熟悉Illustrator的人来说并不会陌生。svg是支持画两次贝塞尔曲线（一个控制点）与三次贝塞尔曲线（两个控制点）的。这就给画出“优雅”的图形成为可能。
最后放一篇今天读到的很好的文章： How do you learn d3 这篇文章总结了几位擅长数据可视化的学习经验：学习d3应该是目标导向的，先知道自己要画的是什么，然后再去学习怎么画。这也给我的学习可视化的方法上提供了思路：不必追求把D3的api看的滚瓜烂熟，D3不过是一个用于实现的设计的工具。
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>recursion</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-180minjs"></script>
<script type="text/javascript">
$ (function ()
{
var svg = $ ("<svg xmlns='>
qtsvg旋转坐标变换公式为，旋转变换（rotate）transform="rotate(angle cx,cy)"。angle代表旋转角度，缺省单位是“度”，瞬时针为正，逆时针为负。（cx,cy）是旋转中心所在的坐标。
先找到iframe对象，再通过iframe的contentDocument属性获取SVG整个文档对象
<iframe src="svg/02svg" frameborder="0" width="500" height="300" id="f1"></iframe>var obj=documentgetElementById("f1");var d=objcontentDocument;
以上就是关于如何将<svg id="content"><g></g></svg>另存为PNG图片，最好是用js、JQuery来实现全部的内容，包括:如何将<svg id="content"><g></g></svg>另存为PNG图片，最好是用js、JQuery来实现、做个svg格式的中国地图,有什么方法让他与真实的经纬度坐标呢、Svg 前端实践总结等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）