首页 > 其他分享 >SVG

SVG

时间：2023-11-06 16:01:08浏览次数：45  
标签：circleCenter SVG 元素 radius && my


Canvas的渲染之外，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 
/> 
</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
/>  
</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  
/>  
</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  
/>  
</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>
<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>

基于DOM节点的API比起客户端侧的CanvasAPI来说，无疑具有更高的可访问性。你可以由此做到：

在服务器端创建基于SVG文档的图像

像其他HTML元素一样检查SVG元素

通过你熟悉的技术（JS和CSS）编程来处理形状、样式和位置

为SVG节点绑定事件函数

为使用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){  
mx = e.pageX,my = e.pageY; 
> 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){  
mx = e.pageX, my = e.pageY;  
> 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.  
});
$("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文档，并且把它放到任何地方，随时缩放为任何尺寸，而完全不需要牺牲质量或者占用过多的带宽。

简单游戏
适合游戏渲染，这并不是秘密。另外的原因是游戏往往不依赖于矢量图形，相反它们使用基于像素的艺术字和动画。然而，SVG对于需要更少字符动画和更多信息展示的游戏来说是一个很棒的选择（例如数独游戏）。

为什么你可能不使用SVG

现在我们已经看过了许多SVG的优点，让我们来看看许多开发者为什么仍然选择不使用SVG。最主要有两个原因：

他们从来没有听说过SVG或者从没想过需要它，所以都忽略了（这不再是借口！）

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）。

除SVG处理外还提供其他更多功能。（请确保你查看了D3.js官网上的示例和这个讨论）


什么时候不用SVG？

可以处理很多浏览器里的图像渲染需求。虽然我们有很多使用SVG的理由，但是就像任何伟大的事物一样，也有一些地方它表现不是很好。

如果你需要渲染上千个节点，更高性能的办法是在Canvas上进行。

如果你的应用需要IE8的支持，记得你需要提供另外一个备用的向量（例如更复杂的VML），或者依靠响应式的图像来完全替代向量。

有用链接

SVG。

Raphael.js

Processing.js,基于强大的Processing –一个Java图像工具

jQuerySVG

Sitepoint article:如何选择Canvas和SVG

Canvasand SVG的性能

Nettuts+ article about Raphael

        你还发现了SVG的其他用途吗？请在评论中告诉我们，还要感谢你的阅读。

        译自：http://net.tutsplus.com/tutorials/why-arent-you-using-svg/



标签：circleCenter,SVG,元素,radius,&&,my
From： https://blog.51cto.com/emanlee/8213438

相关文章

  • python操作svg
    在Python中，您可以使用不同的库来操作SVG文件。一种流行的选择是使用xml.etree.ElementTree来解析和操作SVG文件。以下是一个简单的示例，演示如何使用Python解析和操作SVG文件：importxml.etree.ElementTreeasET#读取SVG文件tree=ET.parse('input.svg')root=tree.getro......
  • 使用js下载svg图片
    //获取svgletdom=document.querySelector('.currentSvg')//将SVG节点转换为XML字符串constsvgString=newXMLSerializer().serializeToString(dom)//下载SVG文件const......
  • vue中如何使用svg，以及碰到的相应问题
    安装cnpminstallsvg-sprite-loader--save-dev创建svg文件夹存放svg图标创建icons文件夹，在icons文件夹下创建svg文件夹存放本地svg图标。vue.config.js中配置svg图片config.module.rule("svg").exclude.add(resolve("src/icons")).end();config.module.rule......
  • 正确配置bootstrap解决NN-SVG无法正常使用
    最近在学习深度学习相关内容，正好在找能绘制模型图的工具，看到很多人都推荐NN-SVG，就去尝试了一下，结果并没法正常使用，页面打开后变成了这样： 按下F12会发现报错： 这是由于网页使用了bootstrap，但是国内的网络远程引用时出错，所以导致页面内容没有完全加载，因此也就没法正常使用了。......
  • 《深入理解SVG》高品质PDF电子书
    下载：https://pan.quark.cn/s/3eb5231d5cf3......
  • Vue3 element-plus el-cascader后缀图标更改（svg）
    概述今天用element-plus写通用表单的时候，发现了它的el-cascader组件竟然不支持改后缀图标，主要它的普通下拉el-select组件都能随便改suffix-icon，级联的下拉就不支持了，令人疑惑。    然后，找了好多办法，包括直接取原生的Component改它的arrowDown属性，发现也不支持了。没......
  • SvgIcon全局组件---开发环境：vue3+vuecli5
    开发背景nodev18.17.0(node-v)npmv8.4.1(npm-v)@vue/cli5.0.8(vue-V)0.SvgIcon全局组件全局组件是指在应用程序的任何位置使用的组件，使用全局组件前需要在Vus.js实例中注册，并将其挂载到实例中。全局组件是可复用的Vus.js实例。1.安装依赖svg-sprite-loadernpm......
  • To install it, you can run: npm install --save svg-baker-runtime/browser-symbol
    运行vue项目npmrundev命令报错报错信息：错误提示：Toinstallit,youcanrun:npminstall--savesvg-baker-runtime/browser-symbol解决：npminstall--saveregenerator-runtimesvg-baker-runtimevue-style-loader......
  • 前端、Vue.js和SVG的一些知识
    前端、Vue.js和SVG的一些知识一、前端简介  1、什么是HTML（静态）（超文本标记语言HyperTextMarkupLanguage），HTML是用来描述网页的一种语言。  2、CSS(层叠样式表CascadingStyleSheets),样式定义如何显示HTML元素，语法为：selector{property：value}(选择符{属性：值}) ......
  • html svg图片 如何不保持横纵比
    图片不保持横纵比是一件很烦的事背景图我们可以使用background-size图片可以使用object-fit来保持横纵比但有时svg图片要不保持横纵比明明指定了宽高也没有用原来矢量图天生就是锁定了横纵比那怎么让svg不保持横纵比呢使用preserveAspectRatio:none<svgpreserveAspectRat......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99