SVG辅助标签

前面的话

  本文将详细介绍SVG辅助标签

 

超链接

  在SVG中,可以使用超链接<a>。超链接可以添加到任意的图形上,类比于热区<area>

  SVG中的超链接有如下3个常用属性  

xlink:href 指定连接地址
xlink:title 指定连接标题
target 指定打开方式

   下面是一个例子

<svg version="1.1" width="300" height="70" xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="http://cnblogs.com">
    <rect x="10" y="10" width="30" height="30" fill="transparent" stroke="black"/>
  </a>
  <a xlink:href="http://cnblogs.com">
    <circle cx="80" cy="30" r="20" fill="transparent" stroke="black"/>
  </a>  
</svg>  

  点击图形,可跳转到其他页面

 

光栅图像

  SVG有一个image元素,可以利用它嵌入任意光栅(以及矢量)图像。它的规格要求应用至少支持PNG、JPG和SVG格式文件

  嵌入的图像变成一个普通的SVG元素。这意味着,可以在其内容上用剪切、遮罩、滤镜、旋转等操作

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200">
  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
     xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/>
</svg>

 

辅助标签

  SVG中有四个常用的辅助标签:<g>、<use>、<symbol>、<defs>

【<g>】

  <g>是一个分组(容器)标签,用来组合元素。可以设置一组元素的属性

  由于<g>是一个通用的分组标签,可以包含任何形状,因此其只能设置所有形状都有的属性,包括stroke、fill等。由于cx、cy是圆特有的属性,所以无法在<g>上设置

  下面是一个制作同心圆的小实例

<svg version="1.1" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="transparent" stroke="black" stroke-width="5"></circle>
  <circle cx="50" cy="50" r="30" fill="transparent" stroke="black" stroke-width="5"></circle>
  <circle cx="50" cy="50" r="20" fill="transparent" stroke="black" stroke-width="5"></circle>
  <circle cx="50" cy="50" r="10" fill="transparent" stroke="black" stroke-width="5"></circle>
</svg>

  如果要改变所有圆的样式时,就要一个一个进行修改,稍显麻烦。这时,使用分组标签<g>就非常合适。如果想通过<g>标签来平移所有<circle>元素的位置,可以使用transform()来实现

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(60,60)" fill="transparent" stroke="red" stroke-width="5">
    <circle r="40"></circle>
    <circle r="30"></circle>
    <circle r="20"></circle>
    <circle r="10"></circle>    
  </g>
</svg>

【defs】

  SVG允许定义以后需要重复使用的图形元素。 建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。 在defs元素中定义的图形元素不会直接呈现

<svg version="1.1" height="40" xmlns="http://www.w3.org/2000/svg">
<defs>
  <linearGradient id="Gradient01">
    <stop offset="20%" stop-color="#39F" />
    <stop offset="90%" stop-color="#F3F" />
  </linearGradient>
  </defs>
  <rect x="10" y="10" width="60" height="30" 
      fill="url(#Gradient01)"  />
</svg>

【use】

  use元素在SVG文档内取得目标节点,并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中,然后将其粘贴到use元素的位置

  因为克隆的节点是不可见的,所以当使用CSS样式化一个use元素以及它的隐藏的后代元素的时候,隐藏的、克隆的DOM不能保证继承CSS属性,除非明文设置使用CSS继承。

  出于安全原因,一些浏览器可能在use元素上应用同源策略,还有可能拒绝载入xlink:href属性内的跨源URI

<svg version="1.1" height="70" xmlns="http://www.w3.org/2000/svg">
<defs>
  <circle  id="Port" r="10"/>
</defs>
<text y="15">black</text>
<use x="50" y="10" xlink:href="#Port" />
<text y="35">red</text>
<use x="50" y="30" xlink:href="#Port" fill="red"/>
<text y="55">blue</text>
<use x="50" y="50" xlink:href="#Port" fill="blue"/>
</svg>

【symbol】 

  symbol元素用来定义一个图形模板对象,它可以用一个<use>元素实例化。symbol元素对图形的作用是在同一文档中多次使用,添加结构和语义,从而提升了可访问性

  一个symbol元素本身是不呈现的。只有symbol元素的实例(亦即,一个引用了symbol的 <use>元素)才能呈现

  一个<symbol>元素可以有preserveAspectRatioviewBox属性。而<g>元素不能拥有这些属性。因此相比于在<defs>元素中使用<g>的方式来复用图形,使用<symbol>元素也许是一个更好的选择

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg">
<symbol id="sym01" viewBox="0 0 150 110">
  <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
  <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
</symbol>
<use xlink:href="#sym01"
     x="0" y="0" width="100" height="50"/>
<use xlink:href="#sym01"
     x="0" y="50" width="75" height="38"/>
<use xlink:href="#sym01"
     x="0" y="100" width="50" height="25"/>
</svg>

 

posted @ 2017-09-05 14:45 小火柴的蓝色理想 阅读(...) 评论(...) 编辑 收藏