zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    LeetCode 1275. 找出井字棋的获胜者 Find Winner on a Tic Tac Toe Game
    LeetCode 307. 区域和检索
    LeetCode 1271 十六进制魔术数字 Hexspeak
    秋实大哥与花 线段树模板
    AcWing 835. Trie字符串统计
    Leetcode 216. 组合总和 III
    Mybatis 示例之 复杂(complex)属性(property)
    Mybatis 示例之 复杂(complex)属性(property)
    Mybatis 高级结果映射 ResultMap Association Collection
    Mybatis 高级结果映射 ResultMap Association Collection
  • 原文地址:https://www.cnblogs.com/xiaohuochai/p/7478486.html
Copyright © 2011-2022 走看看