教程细节
·语言: JavaScript,HTML, SVG
·难度:中等
·预计阅读时间:30
分钟
SVG-可缩放矢量图形,是一个XML风格标记驱动的矢量图形的浏览器渲染引擎。除了IE
9.0和Android V3之前版本外的所有浏览器都支持SVG。Canvas也有同样的支持情况,所以问题往往表现为:我们应该使用哪种方案?
今天,我们将全面介绍SVG,并且解释为什么“我应该使用哪一个”这个问题通常的答案是
“我要用它们来做什么”。要得到SVG的完整信息,请查看Mozilla关于此主题的文档。你还可以看看SVG
DOM API。
概述
我们将首先概述SVG的一些独特的优势。然后,用不着通读SVG所有长达80页的节点类型,我们将说明如何通过Illustrator快速的把SVG文档加入到网页中。我们还会讲讲D3.js,一个强大的、SVG控制的JavaScript库。
“SVG并不只用于像素处理。”
SVG的主要优点
除了用于某些应用上跨图像或者基于Canvas的渲染之外,SVG还有相当多的优点。SVG并不只用于进行像素处理,但是它能够很好地处理矢量图形和可编程性的矢量。
分辨率无关
你可能不知道,分辨率无关和浏览器不可知论是近来前端开发中热议的话题(想想“响应式设计”)。大多数用来解决分辨率问题(例如视网膜屏幕上)的方案既导致了大量不必要的数据下载(高清图像替换)又为一个或者其他浏览器进行了妥协。这使得无线网络中更高分辨率图像的传输往往受限于数据下载速度的瓶颈。这并不理想。
SVG提供了一种方法来提供全分辨率的图形元素:不管什么大小的屏幕,缩放比例或着分辨率。直到SVG出现之前,我们只能通过CSS和文本渲染看到清晰的元素样式。在SVG里不需要使用div和:after元素来创建简单的形状和其他效果。相反你可以创建各种矢量形状。
“SVG提供了一种方法来提供全分辨率的图形元素:不管什么大小的屏幕,缩放比例或着分辨率”
基于DOM节点的API
你写HTML吗?JavaScript和CSS呢?是的。
现在你已经知道了很多关于编写SVG的信息。SVG实际上使用和XML兼容的格式来定义其呈现的形状。除此之外,你可以用CSS为形状添加样式,使它们与JavaScript进行交互。有多个像D3.js和Raphael的JS库可以协助你。下面是一组SVG元素的例子(Envato叶子)。你也可以在JSFiddle上看到这个示例。
- <svg>
- <g>
- <g>
- <pathfill="#8BAC54"d="M28.028,104.509c-35.271,44.527-36.619,105.084-7.616,150.407
- c26.073-66.957,58.919-142.287,99.378-209.543C81.802,61.428,46.351,81.377,28.028,104.509z M278.797,11.28
- c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
- C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794c56.202,44.471,137.782,34.972,182.238-21.163
- C282.657,200.806,278.797,11.28,278.797,11.28z"/>
- </g>
- <g>
- <pathfill="#B1C982"d="M58.392,293.368c59.428-95.491,133.438-188.549,220.117-247.851c0.558-20.869,0.289-34.238,0.289-34.238
- c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
- C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794C52.185,289.102,55.271,291.308,58.392,293.368
- z"/>
- </g>
- </g>
- </svg>
<svg>
<g>
<g>
<path fill="#8BAC54" d="M28.028,104.509c-35.271,44.527-36.619,105.084-7.616,150.407
c26.073-66.957,58.919-142.287,99.378-209.543C81.802,61.428,46.351,81.377,28.028,104.509z M278.797,11.28
c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794c56.202,44.471,137.782,34.972,182.238-21.163
C282.657,200.806,278.797,11.28,278.797,11.28z"/>
</g>
<g>
<path fill="#B1C982" d="M58.392,293.368c59.428-95.491,133.438-188.549,220.117-247.851c0.558-20.869,0.289-34.238,0.289-34.238
c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794C52.185,289.102,55.271,291.308,58.392,293.368
z"/>
</g>
</g>
</svg>
SVG基于DOM节点的API比起客户端侧的CanvasAPI来说,无疑具有更高的可访问性。你可以由此做到:
-
在服务器端创建基于SVG文档的图像
-
像其他HTML元素一样检查SVG元素
-
通过你熟悉的技术(JS和CSS)编程来处理形状、样式和位置
-
为SVG节点绑定事件函数
DOM API为使用SVG提供了更多一系列明显的优势。
无须不必要的HTTP请求
当你在HTML中使用<img>标签来引入图像时,就是定义了一个用户浏览器需要请求的文件。这个请求会占用带宽,需要更多宝贵的时间来下载。如果你的图像用一组DOM节点来代替,可以减少额外的HTTP请求,使你的网站速度更快,对用户更加友好。
简单交互脚本
尽管现在浏览器大战,跨浏览器的DOMAPI在脚本的交互性方面提供了广泛的灵活性,可以延伸到SVG元素上。可以通过CSS为SVG添加样式;SVG元素支持浏览器事件API使得的通过脚本进行交互不在话下;还可以轻松的将一个事件函数绑定到SVG元素的节点上。
这不是真正在画布上绘制的元素。由于画布是一个简单的像素渲染引擎,绘制的元素不能在内存中保存为对象。脚本将保持这些元素的收集工作,并监管所有相关的位置和大小信息来在事件循环中寻找和触发事件。除此之外,Z-index也由脚本处理。
让我们来看看一个例子。请注意:为了保持简洁,我们将使用jQuery。
- var circleCenter = [200, 300],radius =
50;
- $(window).on("mousemove", function(e){
- var mx = e.pageX,my =
e.pageY;
- if (mx > circleCenter[0] - radius && mx<
circleCenter[0] + radius && my> circleCenter[1] - radius && my
<circleCenter[1] + radius){
- // now we are hovering
- }
-
- });
var circleCenter = [200, 300], radius = 50;
$(window).on("mousemove", function(e){
var mx = e.pageX, my = e.pageY;
if (mx > circleCenter[0] - radius && mx < circleCenter[0] + radius && my > circleCenter[1] - radius && my < circleCenter[1] + radius){
// now we are hovering
}
});
相比之下,我们可以看到使用SVG可以更简单的完成相同任务。
- $("svg path#circle").on("hover", function(event){
- // That's all.
- });
$("svg path#circle").on("hover", function(event){
// That's all.
});
显然开发者编写简单交互的脚本来说效率更高。
实际应用
有大量的Canvas相关的JS库(例如KineticJS,可以让你实现一些酷炫的功能)。但如果你像我一样,就不会在你的Web应用里使用完全的物理引擎。作为替代,我最经常需要可扩展的图标、交互图以及详细的、美观的方式来把信息呈现给用户。大多数我需要的图形就是简单易用的公式。这些图形元素很容易的使用SVG来创建,许多简单的物理方程可以处理你的这些需求。所以让我们来看看SVG的一些实际应用。
图形
因为SVG最大的优势是基本的矢量形状,自然非常适用于图形和信息图表。它不仅非常适合用来从给定的数值创建静态的图表,还适用于“实时的”图形:通过AJAX请求、用户输入或者随机生成的数据生成。
路线图
路线图由坚硬的线条和精确的形状组成。这些形状可以用向量图形很好的展示。
复杂的UI元素
例如现在你需要一个UI元素,看上去像圆圈金字塔。你如何用HTML和CSS来实现?好吧,你要先为每一个洞创建一堆的div,为它们每个赋予确定的圆角边框和边框样式。然后你要使用一个div容器来定位它们。现在你如果想要一个整体的渐变该如何实现?你可能必须要使用Mask,或者一些其他技术。我们宁可不使用图像,因为它们不可扩展,而且不能用可编程的方式来重新渲染或者改变。相反,为什么不在Illustrator中绘制元素,并且将它保存为一个SVG文件?这将会让你有一个单独的、可扩展的元素,并且不用担心多个div的管理。
Logos
多数标志都是基于矢量的。你可以为你的Logo定义一个SVG文档,并且把它放到任何地方,随时缩放为任何尺寸,而完全不需要牺牲质量或者占用过多的带宽。
简单游戏
Canvas适合游戏渲染,这并不是秘密。另外的原因是游戏往往不依赖于矢量图形,相反它们使用基于像素的艺术字和动画。然而,SVG对于需要更少字符动画和更多信息展示的游戏来说是一个很棒的选择(例如数独游戏)。
为什么你可能不使用SVG
现在我们已经看过了许多SVG的优点,让我们来看看许多开发者为什么仍然选择不使用SVG。最主要有两个原因:
1、他们从来没有听说过SVG或者从没想过需要它,所以都忽略了(这不再是借口!)
2、SVG XML文档看起来相对古老和复杂,好像使用图像更加简单。
当然没有任何人想手动编辑SVG XML里的一个个点。幸运的是,没有人需要这么做。这是人们常常没有意识到的部分,这里有许多工具来编辑SVG,所以你永远不需要手动来做这件事。
SVG工具
Illustrator,Inkscape
这个矢量编辑器最有可能把你的文件保存为SVG。立即来试试吧!打开Illustrator,画一两个圆,并且把文件保存为SVG。然后在Sublime或者其他文本编辑器中打开,你能够立即看到,除了一些额外的元数据,SVGXML可以马上应用到HTML中。你最有可能看到<g>标签(group),<path>标签(path)以及<svg>元素。
D3.js
虽然你完全可以把SVG XML直接拖放到一个HTML文件中,但是当你想要动态创建SVG时怎么办?D3.js是一个基于数据操作文档的JS库。换句话说,它的伟大之处在于可以基于一系列的数据生成例如条形图和线状图的SVG元素。我们选择展示D3是因为它符合浏览器里SVG实际实现的词汇,请注意另外还有一些很棒的非标准SVG库(值得注意的是Raphael.js)。
D3.js除SVG处理外还提供其他更多功能。(请确保你查看了D3.js官网上的示例和这个讨论)
示例一:脉冲圈
在第一个例子里,我们使用Math.sin和setInterval构造的迭代器简单的创建一个脉冲圈。
示例二:更新线状图
在这个例子里,我们将用一些随机值更新绘制的线状图。
什么时候不用SVG?
SVG可以处理很多浏览器里的图像渲染需求。虽然我们有很多使用SVG的理由,但是就像任何伟大的事物一样,也有一些地方它表现不是很好。
-
如果你需要渲染上千个节点,更高性能的办法是在Canvas上进行。
-
如果你的应用需要IE8的支持,记得你需要提供另外一个备用的向量(例如更复杂的VML),或者依靠响应式的图像来完全替代向量。
有用链接
这里有一些有用的连接,可以帮助你更好的了解SVG。
你还发现了SVG的其他用途吗?请在评论中告诉我们,还要感谢你的阅读。
译自:http://net.tutsplus.com/tutorials/why-arent-you-using-svg/
教程细节
·语言: JavaScript,HTML, SVG
·难度:中等
·预计阅读时间:30
分钟
SVG-可缩放矢量图形,是一个XML风格标记驱动的矢量图形的浏览器渲染引擎。除了IE
9.0和Android V3之前版本外的所有浏览器都支持SVG。Canvas也有同样的支持情况,所以问题往往表现为:我们应该使用哪种方案?
今天,我们将全面介绍SVG,并且解释为什么“我应该使用哪一个”这个问题通常的答案是
“我要用它们来做什么”。要得到SVG的完整信息,请查看Mozilla关于此主题的文档。你还可以看看SVG
DOM API。
概述
我们将首先概述SVG的一些独特的优势。然后,用不着通读SVG所有长达80页的节点类型,我们将说明如何通过Illustrator快速的把SVG文档加入到网页中。我们还会讲讲D3.js,一个强大的、SVG控制的JavaScript库。
“SVG并不只用于像素处理。”
SVG的主要优点
除了用于某些应用上跨图像或者基于Canvas的渲染之外,SVG还有相当多的优点。SVG并不只用于进行像素处理,但是它能够很好地处理矢量图形和可编程性的矢量。
分辨率无关
你可能不知道,分辨率无关和浏览器不可知论是近来前端开发中热议的话题(想想“响应式设计”)。大多数用来解决分辨率问题(例如视网膜屏幕上)的方案既导致了大量不必要的数据下载(高清图像替换)又为一个或者其他浏览器进行了妥协。这使得无线网络中更高分辨率图像的传输往往受限于数据下载速度的瓶颈。这并不理想。
SVG提供了一种方法来提供全分辨率的图形元素:不管什么大小的屏幕,缩放比例或着分辨率。直到SVG出现之前,我们只能通过CSS和文本渲染看到清晰的元素样式。在SVG里不需要使用div和:after元素来创建简单的形状和其他效果。相反你可以创建各种矢量形状。
“SVG提供了一种方法来提供全分辨率的图形元素:不管什么大小的屏幕,缩放比例或着分辨率”
基于DOM节点的API
你写HTML吗?JavaScript和CSS呢?是的。
现在你已经知道了很多关于编写SVG的信息。SVG实际上使用和XML兼容的格式来定义其呈现的形状。除此之外,你可以用CSS为形状添加样式,使它们与JavaScript进行交互。有多个像D3.js和Raphael的JS库可以协助你。下面是一组SVG元素的例子(Envato叶子)。你也可以在JSFiddle上看到这个示例。
- <svg>
- <g>
- <g>
- <pathfill="#8BAC54"d="M28.028,104.509c-35.271,44.527-36.619,105.084-7.616,150.407
- c26.073-66.957,58.919-142.287,99.378-209.543C81.802,61.428,46.351,81.377,28.028,104.509z M278.797,11.28
- c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
- C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794c56.202,44.471,137.782,34.972,182.238-21.163
- C282.657,200.806,278.797,11.28,278.797,11.28z"/>
- </g>
- <g>
- <pathfill="#B1C982"d="M58.392,293.368c59.428-95.491,133.438-188.549,220.117-247.851c0.558-20.869,0.289-34.238,0.289-34.238
- c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
- C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794C52.185,289.102,55.271,291.308,58.392,293.368
- z"/>
- </g>
- </g>
- </svg>
<svg>
<g>
<g>
<path fill="#8BAC54" d="M28.028,104.509c-35.271,44.527-36.619,105.084-7.616,150.407
c26.073-66.957,58.919-142.287,99.378-209.543C81.802,61.428,46.351,81.377,28.028,104.509z M278.797,11.28
c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794c56.202,44.471,137.782,34.972,182.238-21.163
C282.657,200.806,278.797,11.28,278.797,11.28z"/>
</g>
<g>
<path fill="#B1C982" d="M58.392,293.368c59.428-95.491,133.438-188.549,220.117-247.851c0.558-20.869,0.289-34.238,0.289-34.238
c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794C52.185,289.102,55.271,291.308,58.392,293.368
z"/>
</g>
</g>
</svg>
SVG基于DOM节点的API比起客户端侧的CanvasAPI来说,无疑具有更高的可访问性。你可以由此做到:
-
在服务器端创建基于SVG文档的图像
-
像其他HTML元素一样检查SVG元素
-
通过你熟悉的技术(JS和CSS)编程来处理形状、样式和位置
-
为SVG节点绑定事件函数
DOM API为使用SVG提供了更多一系列明显的优势。
无须不必要的HTTP请求
当你在HTML中使用<img>标签来引入图像时,就是定义了一个用户浏览器需要请求的文件。这个请求会占用带宽,需要更多宝贵的时间来下载。如果你的图像用一组DOM节点来代替,可以减少额外的HTTP请求,使你的网站速度更快,对用户更加友好。
简单交互脚本
尽管现在浏览器大战,跨浏览器的DOMAPI在脚本的交互性方面提供了广泛的灵活性,可以延伸到SVG元素上。可以通过CSS为SVG添加样式;SVG元素支持浏览器事件API使得的通过脚本进行交互不在话下;还可以轻松的将一个事件函数绑定到SVG元素的节点上。
这不是真正在画布上绘制的元素。由于画布是一个简单的像素渲染引擎,绘制的元素不能在内存中保存为对象。脚本将保持这些元素的收集工作,并监管所有相关的位置和大小信息来在事件循环中寻找和触发事件。除此之外,Z-index也由脚本处理。
让我们来看看一个例子。请注意:为了保持简洁,我们将使用jQuery。
- var circleCenter = [200, 300],radius =
50;
- $(window).on("mousemove", function(e){
- var mx = e.pageX,my =
e.pageY;
- if (mx > circleCenter[0] - radius && mx<
circleCenter[0] + radius && my> circleCenter[1] - radius && my
<circleCenter[1] + radius){
- // now we are hovering
- }
-
- });
var circleCenter = [200, 300], radius = 50;
$(window).on("mousemove", function(e){
var mx = e.pageX, my = e.pageY;
if (mx > circleCenter[0] - radius && mx < circleCenter[0] + radius && my > circleCenter[1] - radius && my < circleCenter[1] + radius){
// now we are hovering
}
});
相比之下,我们可以看到使用SVG可以更简单的完成相同任务。
- $("svg path#circle").on("hover", function(event){
- // That's all.
- });
$("svg path#circle").on("hover", function(event){
// That's all.
});
显然开发者编写简单交互的脚本来说效率更高。
实际应用
有大量的Canvas相关的JS库(例如KineticJS,可以让你实现一些酷炫的功能)。但如果你像我一样,就不会在你的Web应用里使用完全的物理引擎。作为替代,我最经常需要可扩展的图标、交互图以及详细的、美观的方式来把信息呈现给用户。大多数我需要的图形就是简单易用的公式。这些图形元素很容易的使用SVG来创建,许多简单的物理方程可以处理你的这些需求。所以让我们来看看SVG的一些实际应用。
图形
因为SVG最大的优势是基本的矢量形状,自然非常适用于图形和信息图表。它不仅非常适合用来从给定的数值创建静态的图表,还适用于“实时的”图形:通过AJAX请求、用户输入或者随机生成的数据生成。
路线图
路线图由坚硬的线条和精确的形状组成。这些形状可以用向量图形很好的展示。
复杂的UI元素
例如现在你需要一个UI元素,看上去像圆圈金字塔。你如何用HTML和CSS来实现?好吧,你要先为每一个洞创建一堆的div,为它们每个赋予确定的圆角边框和边框样式。然后你要使用一个div容器来定位它们。现在你如果想要一个整体的渐变该如何实现?你可能必须要使用Mask,或者一些其他技术。我们宁可不使用图像,因为它们不可扩展,而且不能用可编程的方式来重新渲染或者改变。相反,为什么不在Illustrator中绘制元素,并且将它保存为一个SVG文件?这将会让你有一个单独的、可扩展的元素,并且不用担心多个div的管理。
Logos
多数标志都是基于矢量的。你可以为你的Logo定义一个SVG文档,并且把它放到任何地方,随时缩放为任何尺寸,而完全不需要牺牲质量或者占用过多的带宽。
简单游戏
Canvas适合游戏渲染,这并不是秘密。另外的原因是游戏往往不依赖于矢量图形,相反它们使用基于像素的艺术字和动画。然而,SVG对于需要更少字符动画和更多信息展示的游戏来说是一个很棒的选择(例如数独游戏)。
为什么你可能不使用SVG
现在我们已经看过了许多SVG的优点,让我们来看看许多开发者为什么仍然选择不使用SVG。最主要有两个原因:
1、他们从来没有听说过SVG或者从没想过需要它,所以都忽略了(这不再是借口!)
2、SVG XML文档看起来相对古老和复杂,好像使用图像更加简单。
当然没有任何人想手动编辑SVG XML里的一个个点。幸运的是,没有人需要这么做。这是人们常常没有意识到的部分,这里有许多工具来编辑SVG,所以你永远不需要手动来做这件事。
SVG工具
Illustrator,Inkscape
这个矢量编辑器最有可能把你的文件保存为SVG。立即来试试吧!打开Illustrator,画一两个圆,并且把文件保存为SVG。然后在Sublime或者其他文本编辑器中打开,你能够立即看到,除了一些额外的元数据,SVGXML可以马上应用到HTML中。你最有可能看到<g>标签(group),<path>标签(path)以及<svg>元素。
D3.js
虽然你完全可以把SVG XML直接拖放到一个HTML文件中,但是当你想要动态创建SVG时怎么办?D3.js是一个基于数据操作文档的JS库。换句话说,它的伟大之处在于可以基于一系列的数据生成例如条形图和线状图的SVG元素。我们选择展示D3是因为它符合浏览器里SVG实际实现的词汇,请注意另外还有一些很棒的非标准SVG库(值得注意的是Raphael.js)。
D3.js除SVG处理外还提供其他更多功能。(请确保你查看了D3.js官网上的示例和这个讨论)
示例一:脉冲圈
在第一个例子里,我们使用Math.sin和setInterval构造的迭代器简单的创建一个脉冲圈。
示例二:更新线状图
在这个例子里,我们将用一些随机值更新绘制的线状图。
什么时候不用SVG?
SVG可以处理很多浏览器里的图像渲染需求。虽然我们有很多使用SVG的理由,但是就像任何伟大的事物一样,也有一些地方它表现不是很好。
-
如果你需要渲染上千个节点,更高性能的办法是在Canvas上进行。
-
如果你的应用需要IE8的支持,记得你需要提供另外一个备用的向量(例如更复杂的VML),或者依靠响应式的图像来完全替代向量。
有用链接
这里有一些有用的连接,可以帮助你更好的了解SVG。
你还发现了SVG的其他用途吗?请在评论中告诉我们,还要感谢你的阅读。
译自:http://net.tutsplus.com/tutorials/why-arent-you-using-svg/
分享到:
相关推荐
本书将带你详细了解SVG的功能,首先学习简单的SVG应用,如绘制线条,然后逐步探索复杂的特性,比如滤镜、变换、渐变和图案等。 本书第2版扩展了动画、交互式图形以及SVG编程等内容。交互式的在线示例让你很容易在...
本书详尽介绍了可缩放矢量图形(SVG)技术。SVG是一种标记语言,为大多数矢量绘图程序和...本书将带你详细了解SVG的功能,首先学习简单的SVG应用,如绘制线条,然后逐步探索复杂的特性,比如滤镜、变换、渐变和图案等。
Python了解.svg
帮助更多人了解SVG vuer引入方式
Adobe SVG Viewer是Adobe公司最具有代表性的SVG浏览插件(了解什么是SVG请访问http://www.chinasvg.com),该浏览插件从Adobe官方网站可以下载到,同时Adobe公司的很多相关软件都附带了该插件,比如Acrobat Reader、...
一:什么是SVG SVG是1999由W3C发布的2D图形描述语言,纯基于XML格式的标记语言,SVG的 全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG, PNG, GIF等)有很大的差 别。... 更多了解SVG访问这里:http://
为了能够使用 WIML 标记语言,您需要了解 SVG 中文本元素的结构。 基本上文本元素可以包含文本节点或 tspan 元素。 Just some %{fill:#f06}styled% text 请注意,您将始终必须打开和关闭节点。 打开 tspan 将由第...
例如,如果您使用的是webpack,则只要您的加载程序配置了解svg ,就可以像导入任何其他映像一样进行导入。 这样,您将需要从node_modules/payment-icons/找到路径,因此,如果您要查找固定签证图标,则应如下所示...
之前由于没做过类似关系图以及不了解d3,踩了很多坑,我会尽可能将代码描述清楚(毕竟花了两个大夜),建议提前了解svg的简单使用和运行机制,d3的基本使用。 使用d3不像其他图表,d3的使用自由度极大,因此可以完成...
在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标、...本文不是阐述如何利用 svg 来进行画图的,不了解 svg的可以前往 这里查看, 本文主要说一下如何在网站中使用 s
本文主要介绍了SVG的基础概念等知识,以及SVG与CANVAS的区别,最后给出了一个简单示例,方便大家更好的了解SVG可缩放矢量图形。推荐给大家。
不需要了解SVG,它与使用seq,list或array一样容易 除SharpVG外,不需要任何外部依赖项 Windows,Linux和OSX上的.NET Standard跨平台支持 对SVG动画的支持有限 可重复使用的样式 试试SharpVG 运行交互式笔记本: ...
非常好用的SVG编辑器,同时也是学习SVG的好实例。 大家打开后直接打开SVG_Alayer.html文件,就可以绘图了,然后保存一下,你绘制的SVG图形就会保存到桌面上了。大家可以看说明文件了解详细信息。
请继续阅读以了解操作方法。安装npm i svg64 或者yarn add svg64 或者只需下载此存储库并使用dist文件夹中的文件或从unpkg.com取消设置< script src =" https://unpkg.com/svg64 " > </ script >用法在...
IE无疑是最广泛使用的浏览器,而且大多数用户在不了解网站 内容的情况下,不会选择下载并安装一个4M多的SVG插件。而在技术上,SVG无疑前景更光明,而且被其它浏览器支持,可以被非WINDOWS平台用户使 用。
今天来一起了解一个实现SVG路径描边绘制与动画的轻量级类库segment,我们从轻松上手、使用详解、资源和案例、源码解读等几个方面进行介绍。 html方面添加segment,定义path。
之前我们也分享过几个...今天要分享的这款HTML5图表是一个环形的,和饼状图表类似,主要特点也是能清晰的了解每项数据所占的比例。这款HTML5环形图表是利用SVG实现的,图表数据在初始化的时候将出现非常酷的动画效果。
machinepack-svg-精灵从多个 SVG 源文件创建一个 SVG 精灵。安装 $ npm install machinepack-svg-sprite用法该模块的最新使用文档、版本信息和测试状态见 。... 了解更多信息 http://node-machine.org/implementing
最近在用svg的点击事件做东西,之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件,接下来详细介绍添加方法,感兴趣的朋友可以了解下