欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

svg笔记

程序员文章站 2022-07-14 19:28:58
...

svg笔记

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

cx:坐标x位置cy:坐标y位置;r:圆的半径;stroke:圆的外框颜色;stroke-width:圆的外框宽度;fill:填充颜色

------------------------------------------------------------------

svg笔记

<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />

style 属性用来定义 CSS 属性

-------------------------------------------------------------------------------------

svg笔记

 <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />

x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)
y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)
CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)

CSS 的 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)

--------------------------------------------------------------------------------

♦  <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />

定义整个元素的不透明度

--------------------------------------------------------------------------------

svg笔记

<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

rx 和 ry 属性可使矩形产生圆角。

--------------------------------------------------------------------------------

♦ svg笔记

<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />

RX属性定义的水平半径,RY属性定义的垂直半径

--------------------------------------------------------------------------------

 svg笔记

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束

y2 属性在 y 轴定义线条的结束

--------------------------------------------------------------------------------

svg笔记

<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/>

points 属性定义多边形每个角的 x 和 y 坐标

· <polygon> 标签用来创建含有不少于三个边的图形。

· 多边形是由直线组成,其形状是"封闭"的(所有的线条 连接起来)

--------------------------------------------------------------------------------


svg笔记

 <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />

points:按顺序连接

--------------------------------------------------------------------------------

svg笔记

改变 fill-rule 属性为 "evenodd":

--------------------------------------------------------------------------------

svg笔记

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />

--------------------------------------------------------------------------------

svg笔记

<path d="M150 0 L75 200 L225 200 Z" />

开始于位置150 0到达位置75 200然后从那里开始到225 200最后在150 0关闭路径

--------------------------------------------------------------------------------

svg笔记

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"  stroke-width="3" fill="none" /> //ab直线
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"  stroke-width="3" fill="none" />  //bc直线
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"  fill="none" />  //绿色横线
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"  stroke-width="5" fill="none" />  //曲线本体
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">  //三个黑点
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none"  text-anchor="middle">  //文字……
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>
实际只有
<path d="M 100 350 q 150 -300 300 0" stroke="blue"  stroke-width="5" fill="none" />

是曲线

--------------------------------------------------------------------------------

  • M = moveto //开始
  • L = lineto //拉线到
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve //二次贝塞尔曲线
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath / 关闭路径

  • --------------------------------------------------------------------------------

svg笔记

<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>

文字旋转rotate(30【角度】 20,40【xy坐标】)

--------------------------------------------------------------------------------

svg笔记

<defs>

    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" /> //路径
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath> //文字

  </text>

路径上的文字,<defs>:引用的元素容器

--------------------------------------------------------------------------------

svg笔记

<text x="10" y="20" style="fill:red;">Several lines: 
    <tspan x="30" y="45">First line</tspan> 
    <tspan x="10" y="70">Second line</tspan> 

  </text>

文字分小组,每个<tspan> 元素可以包含不同的格式和位置。

--------------------------------------------------------------------------------

<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>

  </a>

链接文字

--------------------------------------------------------------------------------

♦ svg笔记

<g fill="none" stroke="black" stroke-width="6">

    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>

· <g>在svg中提供了如g元素这样的将多个元素组织在一起的元素。由g元素编组在一起的可以设置相同的颜色,可以进行坐标变换,

· strokelinecap属性定义不同类型的开放路径的终结:

--------------------------------------------------------------------------------

♦ svg笔记

<g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />

  </g>

strokedasharray属性用于创建虚线:

--------------------------------------------------------------------------------

♦ SVG滤镜定义在<defs>元素中。

<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜

--------------------------------------------------------------------------------

 ♦ svg笔记

<defs>

    <filter id="f1" x="0" y="0">  //id为f1的效果

      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>

  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> //一个矩形,效果为#f1

<filter>元素id属性定义一个滤镜的唯一名称
<feGaussianBlur>元素定义模糊效果——高斯模糊
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量

<rect>元素的滤镜属性用来把元素链接到"f1"滤镜

--------------------------------------------------------------------------------

svg笔记

<defs>
     <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> //渐变效果#grad1
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:.5" /> //渐变效果开始
      <stop offset="30%" style="stop-color:rgb(255,0,0);stop-opacity:.3" /> //渐变效果结束
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> //椭圆,调用渐变效果#grad1
  • <linearGradient>标签的X1,X2,Y1,Y2属性定义渐变开始和结束位置
  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
  • 填充属性把 ellipse 元素链接到此渐变
  • --------------------------------------------------------------------------------
♦ svg笔记
<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

垂直渐变

--------------------------------------------------------------------------------

♦ svg笔记

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

--------------------------------------------------------------------------------

♦ svg笔记

  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> //CX,CY和r属性定义渐变最外层圆,Fx和Fy定义渐变的最内层圆
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />  //起始(圆心)
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />  //结束(边缘)
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  • CX,CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
  • 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束
  • --------------------------------------------------------------------------------

svg笔记

<radialGradient id="grad1" cx="70%" cy="40%" r="60%" fx="40%" fy="50%">

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

相关标签: svg 矢量