g元素用于将SVG图形进行分组。一旦被分组所有的图形都可以像一个图形一样进行变形。相对于svg元素没有办法将自己作为变形元素来说是一个优势。
直接嵌入
下面的例子是把SVG代码直接嵌入到HTML代码中。
谷歌Chrome,火狐,Internet Explorer9,和Safari都支持。
文件嵌入
web上的svg文件可以直接在浏览器上展示,或者通过以下几种方法嵌入到HTML文件中:
如果HTML是XHTML并且声明类型为application/xhtml+xml,可以直接把SVG嵌入到XML源码中。
如果HTML是HTML5并且浏览器支持HTML5,同样可以直接嵌入SVG。然而为了符合HTML5标准,可能需要做一些语法调整。
可以通过 object 元素引用SVG文件:
类似的也可以使用 iframe 元素引用SVG文件:
理论上同样可以使用 img 元素,但是在低于4.0版本的Firefox 中不起作用。
最后SVG可以通过JavaScript动态创建并注入到HTML DOM中。 这样具有一个优点,可以对浏览器使用替代技术,在不能解析SVG的情况下,可以替换创建的内容。
XML
HTML 文档通常包含一个子节点 ,可能在它前面还有个 DOCTYPE 声明。XML 文档通常包含多个子节点:根元素,DOCTYPE 声明,和 processing instructions。
所以如果你应该使用 document.documentElement,而不是 document.firstChild 来获取根元素。
wordpress/2014/08/svg-viewport-viewBox-preserveaspectratio/">SVG viewport,viewBox,preserveAspectRatio缩放
viewBBox捕捉缩放
最初实现时,不知道有viewBBox,自己辛辛苦苦手动根据getBBox的返回值算比例,唉~
使用原生存在的问题:
红框框的位移,费解。。。(不知道杂计算这个值
)(可能也是由于这个问题才出现viewBox,preserveAspectRatio接口的)
4042b8d294" alt="" title="">
使用原生(没成)
const ratio = calculateSizeRatio(bBox,{height: 60,width: 60});
const width = bBox.x + bBox.width;
const height = bBox.y + bBox.height;
vel.attr('style',['width:',width,'px;',' height:',height,'px;'].join(''));
vel.scale(ratio.width,ratio.height);
vel.translate(-(bBox.xratio.width+vel.node.offsetX),-(bBox.yratio.height+vel.node.offsetY));
使用viewBBox
vel.attr('style','60','px;'].join(''));
vel.attr('viewBox',view)
原文链接:https://www.f2er.com/note/421562.html