svg 日常操作 - 雪剑无影

相关文章推荐

个性的小蝌蚪 · <svg></svg> 如何保存为一个 ...· 3 周前 ·

从容的打火机 · Python文本任务多进程PyQt5图形化控 ...· 9 月前 ·

还单身的熊猫 · UserManager<tuser>.Cre ...· 9 月前 ·

坏坏的葡萄酒 · SpringBoot ...· 1 年前 ·

年轻有为的熊猫 · iOS-父子控制器_ios ...· 1 年前 ·

1 <svg>
2   xmlns='http://www.w3.org/2000/svg'  #标头 必须
　　# SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显
　  # viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度 此处的值与 path 路径的值相关连
3   viewBox='0 0 64 64'    
　　 version="1.1"  #版本号
4   width='64' height='64'　　#svg 大小尺寸 如果想图像形状不变，只改变大小 修改 width height
5   fill='currentcolor'>　　　#填充颜色
6   <path d='M8 26 L32 50 L56 26 L34 6 L32 4 Z' /> #path 路径 这个地方可以放 svg 的子标签
7 </svg>

详解viewBox SVG Viewport、View Box和preserveAspectRatio

标签内的值可以是百分比，也可以直接是数值

矩形 <rect>

必选： width height # 宽高

可选： x y stroke style fill rx ry

x ,y 画布的起始 x y 位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px ）

rect 元素的 width 和 height 属性可定义矩形的高度和宽度

style 属性用来定义 CSS 属性

CSS 的 fill 属性定义矩形的填充颜色（ rgb 值、颜色名或者十六进制值）

CSS 的 stroke 属性定义矩形边框的

rx ,ry 图像圆角

points 点的坐标每两个算是一组组与组之间可以使用逗号做间隔

折现的交换点在线段末尾的中心点(将绘制的线段放大可以观察到)并且在闭合路径(将结束点设置为起始点 )的时候会出现问题

多边形具有自动闭合的左右,可以实现完美闭合并且不用将结束点设置为起始点

SVG的图形填充规则通过fill-rule属性来指定（提供两种选项用于指定如何判断图形的"内部"）

有效值：nonzero | evenodd | inherit 默认：nonzero
http://www.runoob.com/svg/svg-polygon.html

文本路径< textPath >作用就是放在<text>标记内部引用预定义的


    
     <path>

，引用时，我们需要使用


    xlink:href

属性指明需要引用的路径的ID。在SVG里，处理能沿直线方向写文字外，还能够使用


    
     <path>

先定义一条路径，让文字沿着定义好的路径排列

 1 <svg width="100%" height="100%" viewBox="0 0 1000 300"
 2      xmlns="http://www.w3.org/2000/svg" 
 3      xmlns:xlink="http://www.w3.org/1999/xlink">
 4   <defs>
 5     <path id="MyPath"
 6           d="M 100 200 
 7              C 200 100 300   0 400 100
 8              C 500 200 600 300 700 200
 9              C 800 100 900 100 900 100" />
10   </defs>
12   <use xlink:href="#MyPath" fill="none" stroke="red"  />
14   <text font-family="Verdana" font-size="42.5">
15     <textPath xlink:href="#MyPath">
16       我先往上去，然后往下去，然后再往上去，漂亮吧！
17     </textPath>
18   </text>
20   <!-- Show outline of the viewport using 'rect' element -->
21   <rect x="1" y="1" width="998" height="298"
22         fill="none" stroke="black" stroke-width="2" />
23 </svg>

<tspan>标记的作用是将一段文本包裹起来，你可以对这段包裹的文字的颜色、位置、形状等特征进行单独的修饰，它跟HTML标记<span>的作用非常相似

 1 <style>
 2     text{font: 20px Verdana, Helvetica, Arial, sans-serif;}
 3     tspan{  fill: red; font-weight: bold}
 4 </style>
 5 <svg width="250" height="100" viewBox="0 0 250 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
 6     <text x="15" y="30">你丫的
 7       <tspan>不是</tspan> 
 8       一个香蕉
 9     </text>
10 </svg>

一个参数时：表示一段虚线长度和每段虚线之间的间距 / 定义描边的虚线长度，如果提供奇数个，则会自动复制该值成偶数

两个参数或者多个参数时：一个表示长度，一个表示间距/第一个为虚线的宽度第二个是虚线之间的间距

stroke-dashoffset 定义虚线描边的偏移量

滤镜 fe 后缀可用于所有的滤镜滤镜调试 http://jorgeatgu.github.io/svg-filters/

<feGaussianBlur> 元素是用于创建模糊效果

<defs>元素定义短并含有特殊元素（如滤镜）定义

<filter>标签用来定义SVG滤镜

<filter>元素id属性定义一个滤镜的唯一名称

<feGaussianBlur>元素定义模糊效果

in="SourceGraphic"这个部分定义了由整个图像创建效果

stdDeviation属性定义模糊量

<rect>元素的滤镜属性用来把元素链接到"f1"滤镜 filter="url(#f1)"

1 <defs>
2     <filter id="f1" x="0" y="0" width="200%" height="200%">
3       <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
4       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
5       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
6     </filter>
7   </defs>
8   <rect width="90" height="90" stroke="green" stroke-width="3"
9   fill="yellow" filter="url(#f1)" />

<feOffset>元素的属性改为"SourceAlpha"在Alpha通道使用残影，而不是整个RGBA像素

当x1和x2不同，且y1和y2不同时，可创建角形渐变

<linearGradient>标签的id属性可为渐变定义一个唯一的名称

<linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置

渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。

填充属性把 ellipse 元素链接到此渐变

1 <defs>
2     <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
3       <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
4       <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
5     </linearGradient>
6   </defs>
7   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

<radialGradient>标签的 id 属性可为渐变定义一个唯一的名称

CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆

渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束

填充属性把ellipse元素链接到此渐变

1 <defs>
2     <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
3       <stop offset="0%" style="stop-color:rgb(255,255,255);
4       stop-opacity:0" />
5       <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
6     </radialGradient>
7   </defs>
8   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

 1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
 2     <defs>
 3         <pattern id="avatar" x="0" y="0" width="100%"  height="100%" patternContentUnits="objectBoundingBox">
 4             <image width="1" height="1" xlink:href="http://userimg.yingyonghui.com/head/24/1458708838143/5426424.png-thumb"/>
 5         </pattern>
 6         <style>
 7             circle, rect {
 8                 stroke: #ff9900;
 9                 stroke-width: 5px;
10             }
11         </style>
12     </defs>
13     <g>
14         <circle cx="100" cy="100" r="50" fill="url(#avatar)"/></circle>
15         <rect x="10" y="10" rx="20" ry="20" width="100" height="100" fill="url(#avatar)"/></rect>
16     </g>
17    </svg>

patternContentUnitspattern的缩放和排布由patternUnits控制，

 1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
 2         <defs>
 3             <pattern id="tile1" patternUnits="objectBoundingBox"  x="0" y="0" width=".2" height=".2" patternContentUnits="objectBoundingBox">
 4                 <path d="M 0 0 Q .05 .2 .1 .1 T .2 .2" style="stroke: black; fill: none; stroke-width: .01;"></path>
 5                 <path d="M 0 0 h .2 v .2 h-.2z" style="stroke: black; fill: none; stroke-width: .01;"></path>
 6             </pattern>
 7         </defs>
 8         <g transform="translate(20,20)">
 9             <rect x="0" y="0" width="100" height="100" style="fill:url(#tile1); stroke: black;"></rect>
10         </g>
11         <g transform="translate(135,20)">
12             <rect x="0" y="0" width="70" height="80" style="fill:url(#tile1); stroke: black;"></rect>
13         </g>
14         <g transform="translate(220,20)">
15             <rect x="0" y="0" width="150" height="80" style="fill:url(#tile1); stroke: black;"></rect>
16         </g>
17 </svg>

 1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
 2     <defs>
 3         <pattern id="stripe" x="0" y="0" width=".2" height=".3333" patternContentUnits="objectBoundingBox">
 4             <path d="M0 0h1" stroke="grey" stroke-width=".01"></path>
 5             <path d="M0 0v1" stroke="grey" stroke-width=".01"></path>
 6         </pattern>
 7         <!-- 可以在pattern的属性中使用viewBox完全替代patternContentUnits="objectBoundingBox" 
 8         如果有viewBox属性，patternContentUnits属性将被忽略 
 9         viewBox: x y w h -->
10         <pattern id="circle" x="0" y="0" width=".2" height=".25" viewBox="0 0 50 40">
11             <circle cx="20" cy="20" r="15" fill="url(#stripe)" stroke="black"></circle>
12         </pattern>
13     </defs>
14     <path d="M0 0 h300v300h-300z" fill="url(#circle)" stroke="black"></path>
15 </svg>

<defs>定义元素

SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在


    defs

元素里面。这样做可以增加SVG内容的易读性和可访问性。在


    defs

元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用


    
     <use>
    
    或形状路径

元素呈现这些元素

允许的内容物

动画元素
描述性元素
形状元素
结构化元素
渐变元素

<a>


     <altGlyphDef>


     <clipPath>


     <color-profile>


     <cursor>


     <filter>


     <font>


     <font-face>


     <foreignObject>


     <image>


     <marker>


     <mask>


     <pattern>


     <script>


     <style>


     <switch>


     <text>


     <view>

1 <svg width="80px" height="30px" viewBox="0 0 80 30" xmlns="http://www.w3.org/2000/svg">
2   <defs>
3     <linearGradient id="Gradient01">
4       <stop offset="20%" stop-color="#39F" />
5       <stop offset="90%" stop-color="#F3F" />
6     </linearGradient>
7   </defs>
8   <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)"  />       
9 </svg>

 1   <svg width="100%" height="300" xmlns="http://www.w3.org/2000/svg" viewBox='0 0 50 100'>
 2   <style>
 3     .classA { fill:red }
 4   </style> 
 5   <defs>
 6     <g id="Port">
 7       <circle style="fill:inherit" r="10"/>
 8     </g>
 9   </defs>
10   <text y="15">black</text>
11   <use x="50" y="10" xlink:href="#Port" />
12   <text y="35">red</text>
13   <use x="50" y="30" xlink:href="#Port" class="classA"/>
14   <text y="55">blue</text>
15   <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
16  </svg>

<symbol>标记的作用是定义一个图像模板，你可以使用 <use> 标记实例化它，然后在SVG文档中反复使用，这种用法非常的高效。<symbol>本身不会输出任何图像，只有使用 <use> 实例化后才会显示。

 1 <svg viewBox="0 0 150 150" height='300'  xmlns="http://www.w3.org/2000/svg" >
 3 <symbol id="sym01" viewBox="0 0 150 110">
 4   <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
 5   <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
 6 </symbol>
 7 <use xlink:href="#sym01"
 8      x="0" y="0" width="100" height="50"/>
 9 <use xlink:href="#sym01"
10      x="0" y="50" width="75" height="38"/>
11 <use xlink:href="#sym01"
12      x="0" y="100" width="50" height="25"/>
13 </svg>

<g>标记就是‘group’的简写，是用来分组用的，它能把多个元素放在一组里，对<g>标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承<g>标记上的所有属性。用<g>定义的分组还可以使用 <use> 进行复制使用。

1 <svg viewBox="0 0 95 50" xmlns="http://www.w3.org/2000/svg">
3    <g stroke="green" fill="white" stroke-width="5">
4      <circle cx="25" cy="25" r="15"/>
5      <circle cx="40" cy="25" r="15"/>
6      <circle cx="55" cy="25" r="15"/>
7      <circle cx="70" cy="25" r="15"/>
8    </g>
9 </svg>

参考手册： https://www.w3cplus.com/svg-tutorial

http://know.webhek.com/svg/svg-home.html

http://www.runoob.com/svg/svg-tutorial.html

https://developer.mozilla.org/zh-CN/docs/Web/SVG

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201507082192.html

https://segmentfault.com/a/1190000009278935