思享工具箱

SVG研究之路(一)

摘要：
https://css-tricks.com/mega-list-svg-information/rect矩形˂!

SVG研究之路(一)第1张
https://css-tricks.com/mega-list-svg-information/

rect 矩形 
<svg   height='200'>
  <g transform="translate(10 50) rotate(-30)">
    <!-- 移动 (10,50) 旋转 -30  -->
    <rect x='50' y='50'     fill='red' stroke='#000' stroke-width='5'>
      <!-- x,y 位置  width,height 矩形的宽高  fill 填充的颜色  stroke 边框的颜色  stroke-width 边框的宽度 -->
    </rect>
  </g>
</svg>

rx='10' ry='10'
圆角
viewBox

视区盒子

viewBox="x, y, width, height"  
// x:左上角横坐标，y:左上角纵坐标，宽度，height:高度

SVG研究之路(一)第2张

<svg       viewBox="0,0,100,100">

   相当于在 0,0 的位置 把svg缩小了一倍
circle圆 
  <circle cx="50" cy="60" r="50"/>
      cx,cy  圆点
      r 半径
ellipse 椭圆 
<svg     style="border:1px solid #cd0000;margin: 100px">
  <ellipse rx="10" ry="50" fill="none" stroke="red" stroke-  transform="translate(100,100)"></ellipse>
</svg>
line 直线 
<svg     style="border:1px solid #cd0000;margin: 100px">
  <g stroke="green">
    <line x1="100" y1="300" x2="400" y2="480" stroke-width="3"></line>
  </g>
</svg>
polyline 折线 
<svg     style="border:1px solid #cd0000;margin: 100px">
  <polyline fill="none" stroke="blue" stroke- 
            points="50 50,400 20,300 200," />
</svg>
polygon多边形 
<svg     style="border:1px solid #cd0000;margin: 100px">
  <polygon points="20 30,50 60,350 100" fill="red" stroke="blue" stroke-width="2"></polygon>
</svg>

例子

M 100,200 L 400,300

M 100,200 L 400,300 L 123,44

SVG研究之路(一)第3张

path 
<svg     style="border:1px solid #cd0000;margin: 100px">
  <path d="路径" pathLenth="非负数"/>
      // path 计算路径长度
</svg>

大小写

大写 M 绝对定位

小写 m 相对定位

(M m) 移动到新位置

(L l) 从当前坐标到新坐标绘制一条线

(H h) 将线绘制到新的水平坐标

(V v) 将线绘制新的垂直坐标

(Z z) 关闭当前路径

<svg     style="border:1px solid #cd0000;margin: 100px">
  <path d="M 50 50 L 0 300 L 200 200 V 50 H 40 L300 300 L 300 200 Z" fill="none" stroke-  stroke="red"/>
</svg>

有三组命令绘制弯曲的路径: 三次贝塞尔曲线(C,S),二次贝塞尔曲线(Q,T) 和椭圆弧(A)

C

三次贝塞尔曲线(x1,y1,x2,y2,x,y)

SVG研究之路(一)第4张

<path d="M0 0 C40 40,60 40,100,0" stroke="black" fill="none"/>

Ｓ

在原本的点后方建立一个带有贝塞尔曲线

SVG研究之路(一)第5张

<path d="M0 0 C40 40,60 40,100,0 S150 -40, 200 0" stroke="black" fill="none"/>

Q

Q简单些, 起点和终点的贝塞尔曲线公用一个控制点,只需要提供贝塞尔控制点坐标和终点坐标

SVG研究之路(一)第6张

<path d="M0 0 Q50 50, 100 0" stroke="black" fill="none"/>

T

只有一组参数x,y ,表示终点的坐标,所以T的前方接上Q,才能画出对应的坐标线

SVG研究之路(一)第7张

<path d="M0 0 Q50 50, 100 0 T200 0" stroke="black" fill="none"/>

A

工具网址https://mavo.io/demos/svgpath/

椭圆弧(rx,ry,x-axis-rotation,large-arc-flag, sweep-flag)

  • rx ： 椭圆的x 轴半径( 根据不同的终点换算成比例 )
  • ry ： 椭圆的y 轴半径( 根据不同的终点换算成比例 )
  • x-axis-rotation ： 弧线与x 轴的夹角
  • large-arc-flag ： 1 为大角度弧线，0 为小角度弧线( 必须有三个点 )
  • sweep-flag ： 1 为顺时针方向，0 为逆时针方向
  • x ： 终点x 座标
  • y ： 终点y 座标

path太复杂了,我这种小可爱理解有点困难

线上网址

https://jxnblk.github.io/paths/
stroke 边框
  • stroke：边框的颜色
  • stroke-width：边框的宽度
  • stroke-linecap：边框端点的属性( butt (预设)、square、round )
  • stroke-linejoin：边框接合尖角的属性( miter (预设)、round、bevel )
  • stroke-dasharray：虚线

SVG研究之路(一)第8张

<polyline fill="none" stroke="#000000" stroke-  stroke-linecap="round" stroke-linejoin="round" points="193.546,119.133 
    223.245,89.434 252.943,119.133 "/>

SVG研究之路(一)第9张

<line fill="none" stroke="#000000" stroke-dasharray="2" x1="0" y1="0" x2="100" y2="0"/>
鼠标悬浮过渡 fill 填色 
<rect x="290" y="50"     stroke="#000" stroke-  fill="#09f"></rect>

渐变

左到右

<defs>
   <linearGradient id="a1">
     <stop offset="5%" stop-color="#F00" />
     <stop offset="95%" stop-color="#ff0" />
   </linearGradient>
</defs>

<rect x="50" y="250"     stroke="#000" stroke-  fill="url(#a1)"></rect>
<circle cx="220" cy="300" r="50" stroke="#000" stroke-  fill="url(#a1)"></circle>
<rect x="290" y="250"     stroke="url(#a1)" stroke-  fill="none"></rect>

SVG研究之路(一)第10张

放射状

<defs>
   <radialGradient id="a1">
     <stop offset="5%" stop-color="#ff0" />
     <stop offset="95%" stop-color="#f00" />
   </radialGradient>
</defs>

SVG研究之路(一)第11张

垂直渐变

<defs>
   <linearGradient   x1="0%" y1="0%" x2="0%" y2="100%">
     <stop offset="5%" stop-color="#F00" />
     <stop offset="95%" stop-color="#ff0" />
   </linearGradient>
</defs>

SVG研究之路(一)第12张

倾斜渐变

<defs>
   <linearGradient   x1="0%" y1="0%" x2="100%" y2="100%">
     <stop offset="5%" stop-color="#F00" />
     <stop offset="95%" stop-color="#ff0" />
   </linearGradient>
</defs>

SVG研究之路(一)第13张

修改中心点的渐变

<defs>
   <radialGradient   cx="20%" cy="40%">
     <stop offset="5%" stop-color="#ff0" />
     <stop offset="95%" stop-color="#f00" />
   </radialGradient>
</defs>

SVG研究之路(一)第14张

pattern

用于fill

通过x轴或y轴方向以固定间隔平铺,然后通过id引用

属性

  • patternUnits = "userSpaceOnUse | objectBoundingBox"
  • patternContentUnits = "userSpaceOnUse | objectBoundingBox"
  • patternTransform
  • x
  • y
  • width
  • height
  • xlink:href
  • preserveAspectRatio = "[defer] []"

patternUnits=userSpaceOnUse

表示以使用者的坐标为主

<svg     >
  <defs>
    <pattern   patternUnits="userSpaceOnUse"   height="60">
      <rect     fill="#f99" x="0" y="0"/>
    </pattern>
  </defs>
  <rect     fill="url(#p)" stroke="#aaa" />
</svg>

SVG研究之路(一)第15张

完整版,你可以把每一个注释下,方便自己理解

<svg     >
  <defs>
    <pattern   patternUnits="userSpaceOnUse"   height="60">
      <rect     fill="#f99" x="0" y="0"/>
    </pattern>
  </defs>
  <rect     fill="url(#p)" stroke="#aaa" />
  <circle cx="150" cy="80" r="50" stroke="#000" fill="url(#p)" />
  <rect     x="1" y="1" stroke="#00f" stroke-  fill="url(#p)" />
</svg>

SVG研究之路(一)第16张

优先级从上到下一次递增的

<defs>
  <pattern   patternUnits="userSpaceOnUse"   height="40">
    <rect     fill="#f99" x="30" y="0"></rect>
  </pattern>
</defs>

我们会发现当我们把pattern里的rect,位置超过了pattern 的范围,就会发现rect会被裁剪

SVG研究之路(一)第17张

patternUnits=userSpaceOnUse

设置是以我们画出来的形状为基准, 设置pattern长宽,就变成了比例而不是数值

如果宽高为1,1 那么画出来的就是等于图形长宽

<svg     >
  <defs>
    <pattern   patternUnits="objectBoundingBox"   height="1">
      <rect     fill="#f99" x="40" y="40"/>
    </pattern>
  </defs>
  <!-- 长宽比 1:1-->
  <rect     fill="url(#p)" stroke="#aaa" />
   <!--x=40,y=40,w30h30 fill #f99 填充一个小矩形-->
</svg>

SVG研究之路(一)第18张

<svg     >
  <defs>
    <pattern   patternUnits="objectBoundingBox"   height="1">
      <rect     fill="#f99" x="40" y="40"/>
    </pattern>
  </defs>
  <!-- 长宽比 1:1-->
  <circle cx="150" cy="80" r="50" stroke="#000" fill="url(#p)" />
    <!--
           那么这个元素的起步位置原点应该是 100,30
           由于x=40,y=40
           所以 填充的矩形的其实位置是140,70
    -->
</svg>

SVG研究之路(一)第19张

<svg   height="160">
  <defs>
    <pattern   patternUnits="objectBoundingBox"   height="1">
      <rect     fill="#f99" x="0" y="0"/>
    </pattern>
  </defs>
  <!-- 长宽比 1:1-->
  <rect     stroke-  stroke="red"  fill="url(#p)" x="20" y="20"/>
   <circle r="30" cx="200" cy="80" fill="url(#p)" stroke-  stroke="red"/>
</svg>

image-20201011165622958

如果把width设为.4, height设置为0.4,那么在100*100的图形中,则是40 * 40 的pattern,

如果rect 为 width 30 height 30 则背景图案是带有10的宽度间距的重复图案

<svg   height="160">
  <defs>
    <pattern   patternUnits="objectBoundingBox"   height=".4">
      <rect     fill="#f99" x="0" y="0"></rect>
    </pattern>
  </defs>
  <circle cx="180" cy="80" r="50" stroke="#0a0" stroke-  fill="url(#p)" />
  <rect     x="10" y="30" stroke="#000" stroke-  fill="url(#p)" />
</svg>

SVG研究之路(一)第20张

不同的矩形的套用,出来的结果不同

<svg   height="160">
  <defs>
    <pattern   patternUnits="objectBoundingBox"   height=".4">
      <rect     fill="#f99" x="0" y="0"></rect>
    </pattern>
  </defs>
  <rect     x="120" y="30" stroke="#000"  stroke-  fill="url(#p)" />
  <rect     x="10" y="30" stroke="#000" stroke-  fill="url(#p)" />
</svg>

image-20201011171826093

设定为userSpaceOnUse实际的宽度的高度: 比例乘上实际套用的图像的长/宽

当为width/height 80px 80*0.4=32 由于他们每一个宽度是30那么空隙就是2

patternTransform

让我们直接对pattern 下大 transform

倾斜45度

<svg   height="160">
  <defs>
    <pattern   patternUnits="objectBoundingBox"     patternTransform="rotate(45)">
      <rect     fill="#000" x="0" y="0"></rect>
      <rect     fill="#fa0" x="10" y="0"></rect>
    </pattern>
  </defs>

  <rect     x="10" y="30" stroke="#000" stroke-  fill="url(#p1)" />
</svg>

SVG研究之路(一)第21张

要记得的点在于userSpaceOnUse 就是标准的长度数值,objectBoundingBox 就是比例

xlink:href

二次引入

<defs>
  <pattern id="r1">
    <rect     fill="#0c0" x="0" y="0"></rect>
  </pattern>
  <pattern   patternUnits="objectBoundingBox"     xlink:href="https://tool.4xseo.com/article/159562.html" />
  <pattern   patternUnits="objectBoundingBox"     xlink:href="https://tool.4xseo.com/article/159562.html" />
</defs>

<rect     x="10" y="30" stroke="#000" stroke-  fill="url(#p1)" />
<rect     x="120" y="30" stroke="#000" stroke-  fill="url(#p2)" />

SVG研究之路(一)第22张

defs

把一些重复利用的物体放在defs元素内

再use 把元素呈现出来

use 的属性有 x,y 的坐标

<svg     >
<defs>
  <rect       x="10" y="10" fill="red"/>
</defs>
<use xlink:href="https://tool.4xseo.com/article/159562.html"/>
<use xlink:href="https://tool.4xseo.com/article/159562.html" x="10" y="300"/>
</svg>

SVG研究之路(一)第23张

标签：#rect#svg#offset | 浏览：150 | 发布日期：

免责声明：文章转载自《SVG研究之路(一)》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇算法系列之图--探查环对偶上升下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

VC++ 6.0中实现三叉切分窗口与多视图 [转]

一、引用 　　当用户需要同时对文当的不同部分进行编辑时，常常会用到切分窗口;这些窗口可以都是相同的视，或者一个窗口为列表视，而另一个为树型视图。应用程序框架有多种方式来表示多视图，切分窗口是其中的方式之一。 　　切分窗口分为动态切分窗口和静态切分窗口，它们都是由CsplitterWnd类(MFC类库)来实现的，在这两种表示方式中，创建同一视图类的对象是比较...

用node生成svg图片

最近有个需求需要后台调统计数据，直接生成图片吐到前端，本来以为比较简单的，结果中间还是遇到了很多问题： 环境： windows:python 2.6+,visual stdio 2008 express开发包 linux:gcc,python 2.6+ node版本：v0.10.35 node组件：express@3.18.6jsdom@3.1.2rsvg...

SVG技术入门：线条动画实现原理

相信大家都见到过这样神奇的技术：一副线条构成的画能自动画出自己。非常的酷。Jake Archibald是这种SVG技术的首创者，并且写了一篇非常好的文章来描述它是如何实现的。Brian Suda也在24 Ways网站上讨论过它。 Polygon使用它在一篇设计方面的文章里创造出了非常神奇的效果。Codrops也做出了一些非常漂亮的例子。 其实我没有什么好增...

C语言Windows程序开发—CreateWindow函数介绍【第03天】

（一）CreateWindow函数的参数介绍： 1 HWND CreateWindow( 2 LPCTSTR lpClassName, //Windows窗口中预定义的控件结构体，包括：BUTTON（按钮），EDIT（文本框），LISTBOX（列表），MDICLIENT（子窗口），SCROLLBAR（滚动条），RICHEDIT（富文...

svg DOM的一些js操作

这是第一个实例,其中讲了如何新建svg,添加元素,保存svgdocument,查看svg. 下面将附上常用一些元素的添加方法:(为js的,但基本上跟java中操作一样,就是类名有点细微差别) Circle var svgns = "http://www.w3.org/2000/svg";function makeShape(evt) { if ( wi...

MFC画刷类CBrush使用实例 .

画刷类CBrush利用画笔可以画图形的边框，而用画刷就可以在图形内着色。大多数的GDI绘图函数既使用画笔又使用画刷，它们用画笔绘制各种图形的周边，而用画刷填充图形，因而可以用一种颜色和风格去设置画笔，而用另一种颜色和风格去设定画刷，通过一次函数调用就可以绘制出形状复杂的图形。画刷是由CBrush类管理的，创建画刷有两种方法：一种是调用构造函数，另一种是调用...

最新文章

随机推荐

思享工具箱导航