SVG学习一

wjp啊
186 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

学习svg是因为要学习D3.js来实现企业图谱,之前只是在vue项目中使用过svg，用到的是svg的use属性，相信很多人都这样用过。

<svg :class="svgClass" aria-hidden="true">
  <use :xlink:href="iconName" pointer-events="none" />
</svg>

使用svg的原因：

  1. 大多数浏览器都支持SVG，除了IE8及更老的浏览器版本。
  2. 体积小。
  3. 小图片，放大不易模糊。

SVG是什么

Scalable Vector Graphics 可缩放矢量图形，放大不会出现锯齿状像素点。svg是XML文档结构。

svg-demo.png

svg标签

  1. 以svg元素包裹的即为画布区域
  2. width和height属性来设置画布（视口）大小，(单位可以为em、ex、px、pt、pc、cm、mm和in)也可以为百分比，开发中一般使用px和em居多（1em等于当前的字体尺寸。2em 等于当前字体尺寸的两倍）。
  3. viewBox自定义视野，viewBox的四个属性值分别是，x坐标，y坐标，截取的视野宽度，截取的视野高度。
  4. smlns XML命名空间（XML Namespaces），是为了解决使用相同元素的命名冲突问题，这个可以忽略，不影响。
  5. 可以直接改变以上属性值，查看效果。

title标签

  1. title标签，可以去掉，不影响展示的效果。

defs标签

  1. defs是definitions的缩写，

SVG 允许我们定义以后需要重复使用的图形元素。 建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加 SVG 内容的易读性和可访问性。 在defs元素中定义的图形元素不会直接呈现。 你可以在你的视口的任意地方利用 <use>元素呈现这些元素。
defs是容器元素 允许的内容物 | 任意数量、任意排序的下列元素： 动画元素 描述性元素 形状元素 结构化元素 渐变元素 <a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

  1. 上图包裹的是渐变元素，偷懒，不展开说了，用到哪个看哪个吧。
  2. g是group的缩写，即分组的意思，可包裹任意数量的元素。功能类似于HTML里的div盒子。(经常性觉得自己的表达总是不够准确，用自己的话来描述，总是会缺少一些要点）

元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过<use>元素来引用它们

下面的截图是，企查查-企业图谱页面的元素截图，可参考理解g标签的使用。

企业图谱.png

简单的图形

rect，circle，ellipse，line，text，path。
接下来通过一个实例，简单介绍一下，企业图谱中，企业节点的通过svg绘制的过程 效果如下 rect-dome.png 这些属性都比较好理解，可能遇到的问题是：

  1. g元素的坐标问题，transform的使用意义；
  2. text标签 text-anchor属性，dominant-baseline属性；
  3. text标签在rect中居中显示的问题。
<svg width="375px" height="100%">
  <g transform="translate(50, 20)">
    <rect
      rx="2"
      ry="2"
      width="144px"
      height="30px"
      fill-opacity="0"
      stroke="#13C2C2"
    ></rect>
    <text
      font-size="12"
      x="72"
      y="15"
      text-anchor="middle"
      dominant-baseline="middle"
    >
      <tspan fill="#333333">某企业名称</tspan>
      <tspan fill="#999999">[</tspan>
      <tspan fill="#F9AD14">10.00%</tspan>
      <tspan fill="#999999">]</tspan>
    </text>
    <g transform="translate(135,15)">
      <circle r="5" stroke="rgb(102, 102, 102)" fill="#fff"></circle>
      <line x1="-2" x2="2" y1="0" y2="0" stroke="rgb(102,102,102)"></line>
      <line x1="0" x2="0" y1="-2" y2="2" stroke="rgb(102,102,102)"></line>
    </g>
  </g>
</svg>
avatar
文章
阅读
粉丝