Fade away

Appearance

标签属性 ​

填充属性 ​

fill ​

图形填充颜色，默认black，可传入一个颜色值，或者一个url()，或者none选择无填充

fill="none" 时，会什么也看不到，所以最好给个描边颜色stroke

html
<svg width="400" height="200" style="border: 1px solid #ddd">
    <rect width="50" height="50" x="10" y="10"></rect>
    <rect width="50" height="50" x="70" y="10" fill="red"></rect>
    <rect width="50" height="50" x="130" y="10" fill="none" stroke="black"></rect>
</svg>

fill-opacity ​

填充透明度，默认值1，范围(0-1)

html
<svg width="400" height="160" style="border: 1px solid #ddd">
    <rect width="50" height="50" x="10" y="10" fill-opacity="0"></rect>
    <rect width="50" height="50" x="70" y="10" fill-opacity="0.1"></rect>
    <rect width="50" height="50" x="130" y="10" fill-opacity="0.2"></rect>
    <rect width="50" height="50" x="190" y="10" fill-opacity="0.3"></rect>
    <rect width="50" height="50" x="250" y="10" fill-opacity="0.4"></rect>
    <rect width="50" height="50" x="310" y="10" fill-opacity="0.5"></rect>

    <rect width="50" height="50" x="10" y="70" fill-opacity="0.6"></rect>
    <rect width="50" height="50" x="70" y="70" fill-opacity="0.7"></rect>
    <rect width="50" height="50" x="130" y="70" fill-opacity="0.8"></rect>
    <rect width="50" height="50" x="190" y="70" fill-opacity="0.9"></rect>
    <rect width="50" height="50" x="250" y="70" fill-opacity="1"></rect>
</svg>

fill-rule ​

复杂路径填充规则，可选值nonzero | evenodd，默认值nonzero

  • nonzero：只要是路径包含的取余，全填充颜色
  • evenodd：如果路径绘制出了环形，则从任意一点做一条射线，查看与射线相交的路径段的数量。
    • 如果有奇数个路径段与射线相交，则点在内部；内部会被填充颜色
    • 如果有偶数个，则点在外部。外部不会填充颜色
html
<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="nonzero" stroke="red" d="M10,10  h90 v90 h-90 z M30,30 h50 v50 h-50 z" />

    <path
        fill-rule="evenodd"
        stroke="red"
        d="
    M210,10  h90 v90 h-90 z 
    M230,30 v50 h50 v-50 z 
    M240,40 v30 h30 v-30 z"
    />
</svg>

TIP

它可以被应用于任何元素，但只会在以下元素中有效：<path>、<polygon>、<polyline>、<text>、<textPath>、<tspan>

paint-order ​

用来控制图形的绘制顺序，正常情况的顺序是填充(fill)、描边(stroke)、标记(marker)，也就是默认值paint-order="normal"

有以下几个可选值

  • normal（默认）：等同于 fill stroke markers
  • stroke：先画描边
  • fill：再画填充
  • markers：最后画箭头等标记

也可以进行组合

css
paint-order: stroke fill;  /* 描边在下，填充在上（最常用） */
paint-order: fill stroke markers; /* 默认行为 */
paint-order: markers stroke fill; /* 标记最底，描边中，填充最上 */

默认情况下，给文字加描边会“吃掉”文字内部：

Hello

文字会显得很细甚至发虚。

✅ 使用 paint-order="stroke fill" 后：

Hello

TIP

你可以将该属性与以下 SVG 元素一起使用：<circle>，<ellipse>，<line>，<path>，<polygon>，<polyline>，<rect>，<text>，<textPath>，<tspan>

描边属性 ​

描边属性分别由以下几个

  • stroke：描边颜色
  • stroke-width：描边宽度
  • stroke-linecap：线条两端端点的样式
  • strok-dasharray：

所有描边属性都可以应用与线条，文本，图形，轮廓

stroke ​

描边颜色，默认是没有颜色

html
<svg>
    <rect width="100" height="50" x="25" y="25" fill="none" stroke="blue"></rect>
    <line x1="10" y1="10" x2="100" y2="100" stroke="red" />
</svg>

stroke-width ​

线条的宽度，默认是1

html
<svg>
    <line x1="10" y1="10" x2="100" y2="10" stroke="red" stroke-width="1" />
    <line x1="10" y1="20" x2="100" y2="20" stroke="red" stroke-width="5" />
    <line x1="10" y1="40" x2="100" y2="40" stroke="red" stroke-width="10" />
</svg>

stroke-linecap ​

控制线条两端的样式，可选值butt | round | square，默认值butt

html
<svg>
    <line x1="10" y1="10" x2="100" y2="10" stroke="red" stroke-width="10" stroke-linecap="butt" />
    <line x1="10" y1="30" x2="100" y2="30" stroke="red" stroke-width="10" stroke-linecap="round" />
    <line x1="10" y1="50" x2="100" y2="50" stroke="red" stroke-width="10" stroke-linecap="square" />
</svg>

stroke-linejoin ​

控制多个线条连接处的样式，默认值miter

  • miter = 尖角
  • round = 圆角
  • bevel = 切平
html
<svg width="1000" height="400">
    <path
        d="M50 50 L50 150 L150 150 L150 50 Z"
        stroke="black"
        stroke-width="30"
        fill="none"
        stroke-linejoin="miter"
    ></path>
    <path
        d="M190 50 L190 150 L290 150 L290 50 Z"
        stroke="black"
        stroke-width="30"
        fill="none"
        stroke-linejoin="round"
    ></path>
    <path
        d="M330 50 L330 150 L430 150 L430 50 Z"
        stroke="black"
        stroke-width="30"
        fill="none"
        stroke-linejoin="bevel"
    ></path>
    <text x="60" y="30" fill="red" font-size="30" text-anchor="start">miter</text>
    <text x="200" y="30" fill="red" font-size="30" text-anchor="start">round</text>
    <text x="340" y="30" fill="red" font-size="30" text-anchor="start">bevel</text>
</svg>
miterroundbevel

stroke-miterlimit ​

指定交点菱形的长度，默认为4。该属性只在stroke-linejoin属性的值等于miter时有效

值是「倍数」，不是px，2 = 描边宽的2倍，不是2px

html
<svg width="1000" height="400">
    <path
        d="M50 50 L100 150 L150 50"
        stroke="black"
        stroke-width="30"
        fill="none"
        stroke-linejoin="miter"
        stroke-miterlimit="1"
    ></path>
    <path
        d="M180 50 L230 150 L270 50"
        stroke="black"
        stroke-width="30"
        fill="none"
        stroke-linejoin="miter"
        stroke-miterlimit="4"
    ></path>
</svg>

vector-effect ​

**矢量效应**特性指定了绘制物体时所用的矢量效果。矢量效果会在其他合成操作（如滤镜、蒙罩和剪辑）之前应用。

html
<svg viewBox="0 0 500 240">
  <!-- normal -->
  <path
    d="M10,20 L40,100 L39,200 z"
    stroke="black"
    stroke-width="2px"
    fill="none"></path>

  <!-- scaled -->
  <path
    transform="translate(100,0) scale(4,1)"
    d="M10,20 L40,100 L39,200 z"
    stroke="black"
    stroke-width="2px"
    fill="none"></path>

  <!-- fixed-->
  <path
    vector-effect="non-scaling-stroke"
    transform="translate(300, 0) scale(4, 1)"
    d="M10,20 L40,100 L39,200 z"
    stroke="black"
    stroke-width="2px"
    fill="none"></path>
</svg>

stroke-dasharray ​

用于控制线条的虚线形式，虚线分为实线部分和空白部分，strok-dasharray传入的参数就是控制这两部分的长度

strok-dasharray可以传入若干个数字作为参数，多个参数用空格隔开

传入的参数会以循环的方式控制实线部分和空白部分

  • 单个参数：会自动补一个一样的值，比如5，会变成5 5，就是5px的线条，5px的空白，这样循环下去
  • 两个参数：比如20 5，就是20px的线条，5px的空白，这样循环下去
  • 多个参数，奇数参数会自动复制一份变成偶数，比如20 5 3，会变成20 5 3 20 5 30，就是20px线条，5px空白，3px线条，20px空白，5px线条，3px空白，这样循环下去
  • 百分比：按照线条总长度的比例
html
<svg width="500" height="150" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="10" x2="300" y2="10" stroke="black" stroke-width="10" stroke-dasharray="20" />
    <line x1="10" y1="30" x2="300" y2="30" stroke="black" stroke-width="10" stroke-dasharray="20 5" />
    <line x1="10" y1="50" x2="300" y2="50" stroke="black" stroke-width="10" stroke-dasharray="20 5 3 " />
    <line x1="10" y1="70" x2="300" y2="70" stroke="black" stroke-width="10" stroke-dasharray="10% 5%" />
</svg>

stroke-dashoffset ​

线条整体的偏移量，默认值0，可以传正值和负值

  • 正值 = 图案向“绘制方向的反方向”移动
  • 负值 = 向绘制方向移动
strokeDashoffset：0

此属性可用于实现描边动画：

加载进度条

圆形进度条

或者是一个路径

或者是一个图标的显示动画

正在加载动画

带进度的动画

75%

文本属性 ​

font-family ​

指定文本的字体

html
<svg width="300" height="100">
    <text x="0" y="30" fill="red" font-size="30" font-family="fantasy">你好，我要学习svg</text>
    <text x="0" y="70" fill="red" font-size="30" font-family="monospace">你好，我要学习svg</text>
</svg>
你好，我要学习svg你好，我要学习svg

font-size ​

指定文本的字体大小

html
<svg width="300" height="100">
    <text x="0" y="30" fill="red" font-size="18">你好，我要学习svg</text>
    <text x="0" y="70" fill="red" font-size="30">你好，我要学习svg</text>
</svg>
你好，我要学习svg你好，我要学习svg

font-weight ​

指定文本的字体粗细，可以是normal | bold | bolder | lighter |数值

html
<svg width="300" height="200">
    <text x="0" y="30" fill="red" font-size="30" font-weight="normal">你好，我要学习svg</text>
    <text x="0" y="70" fill="red" font-size="30" font-weight="bold">你好，我要学习svg</text>
    <text x="0" y="110" fill="red" font-size="30" font-weight="bolder">你好，我要学习svg</text>
    <text x="0" y="150" fill="red" font-size="30" font-weight="lighter">你好，我要学习svg</text>
    <text x="0" y="190" fill="red" font-size="30" font-weight="200">你好，我要学习svg</text>
</svg>
你好，我要学习svg你好，我要学习svg你好，我要学习svg你好，我要学习svg你好，我要学习svg

text-anchor ​

指定文本的横向对齐方式，对齐是相对于横坐标x的，默认值：start，可选值：

  • start：x坐标为起点
  • middle：x坐标为中点
  • end：x坐标为终点
html
<svg width="400" height="200">
    <line x1="200" y1="0" x2="200" y2="200" stroke="red" />
    <text x="200" y="30" fill="red" font-size="30" text-anchor="start">我要学习svg</text>
    <text x="200" y="70" fill="red" font-size="30" text-anchor="middle">我要学习svg</text>
    <text x="200" y="110" fill="red" font-size="30" text-anchor="end">我要学习svg</text>
</svg>
我要学习svg我要学习svg我要学习svg

dominant-baseline ​

指定文本的纵向对齐方式，对齐是相对于纵坐标y的，默认值：auto，可选值

  • auto：y坐标为文字的底线
  • middle：y坐标为文字的中线
  • hanging：y坐标为文字的顶线
html
<svg width="500" height="200" style="border: 1px solid #ddd">
	<!-- 参考线：y=100 -->
	<line x1="0" x2="500" y1="100" y2="100" stroke="red" stroke-dasharray="5" />

	<!-- 默认：屁股线在y=100（字飘上） -->
	<text x="20" y="100" font-size="30" dominant-baseline="auto" fill="gray">默认(auto)</text>

	<!-- 钉在中线：完美垂直居中 -->
	<text x="160" y="100" font-size="30" dominant-baseline="middle" fill="blue">middle</text>

	<!-- 钉在顶线：字顶贴y -->
	<text x="300" y="100" font-size="30" dominant-baseline="hanging" fill="green">hanging</text>
</svg>
默认(auto)middlehanging

letter-spacing ​

文本中字符之间的距离

html
<svg width="400" height="240">
    <text x="0" y="30" fill="red" font-size="30" letter-spacing="10">我要学习svg</text>
    <text x="0" y="60" fill="red" font-size="30" letter-spacing="20">我要学习svg</text>
    <text x="0" y="90" fill="red" font-size="30" letter-spacing="30">我要学习svg</text>
</svg>
我要学习svg我要学习svg我要学习svg

word-spacing ​

文本中词与词之间的距离

html
<svg width="400" height="240">
    <text x="0" y="30" fill="red" font-size="30"  word-spacing="10">fuck you</text>
    <text x="0" y="60" fill="red" font-size="30"  word-spacing="20">fuck you</text>
    <text x="0" y="90" fill="red" font-size="30"  word-spacing="30">fuck you</text>
</svg>
fuck youfuck youfuck you

text-decoration ​

文本装饰线，书写格式为<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

text-decoration-line：装饰线的种类

  • none：不会产生文字装饰。
  • underline：文本下方一条横线。
  • overline：文本上方一条横线。
  • line-through：文本中间一条横线。
  • blink：文字闪烁（可见与隐形交替）。符合规范的用户代理不得眨眼。该值被 CSS 动画取代。
  • spelling-error：每行文本都采用用户代理的高亮拼写错误方法，在大多数浏览器中用虚线标示。
  • grammar-error：每行文本都采用用户代理的法式高亮语法错误，在大多数浏览器中是虚线绿色。
html
<svg width="400" height="300">
    <text x="200" y="30" fill="red" font-size="30" text-decoration="none">我要学习svg</text>
    <text x="200" y="70" fill="red" font-size="30" text-decoration="underline">我要学习svg</text>
    <text x="200" y="110" fill="red" font-size="30" text-decoration="overline">我要学习svg</text>
    <text x="200" y="150" fill="red" font-size="30" text-decoration="line-through">我要学习svg</text>
    <text x="200" y="190" fill="red" font-size="30" text-decoration="blink">我要学习svg</text>
    <text x="200" y="230" fill="red" font-size="30" text-decoration="spelling-error">我要学习svg</text>
    <text x="200" y="270" fill="red" font-size="30" text-decoration="grammar-error">我要学习svg</text>
</svg>
我要学习svg我要学习svg我要学习svg我要学习svg我要学习svg我要学习svg我要学习svg

text-decoration-style：装饰线的样式

  • solid：一条连贯的直线
  • double：两条连贯的直线
  • dotted：点线
  • dashed：虚线
  • wavy：波浪线
html
<svg width="400" height="200">
    <text x="200" y="30" font-size="30" text-decoration="line-through solid blue">我要学习svg</text>
    <text x="200" y="70" font-size="30" text-decoration="line-through double">我要学习svg</text>
    <text x="200" y="110" font-size="30" text-decoration="line-through dotted">我要学习svg</text>
    <text x="200" y="150" font-size="30" text-decoration="line-through dashed">我要学习svg</text>
    <text x="200" y="190" font-size="30" text-decoration="line-through wavy">我要学习svg</text>
</svg>
我要学习svg我要学习svg我要学习svg我要学习svg我要学习svg

text-decoration-color：装饰线的颜色，实测没屌用

html
<svg width="400" height="40">
    <text x="200" y="30" font-size="30" text-decoration="line-through solid blue">我要学习svg</text>
</svg>
我要学习svg

writing-mode ​

显示、变换、交互 ​

display ​

控制元素的显示与隐藏，可选inline|block，默认值inline

隐藏之后就是消失，不会响应事件

html
<svg width="400" height="240">
    <rect x="50" y="50" width="100" height="100" display="none"/>
    <rect x="160" y="50" width="100" height="100" display="inline"/>
</svg>
<svg width="400" height="240">
        <rect x="50" y="50" width="100" height="100" display="none"/>
        <rect x="160" y="50" width="100" height="100" display="inline"/>
    </svg>

visibility ​

控制元素的显示与隐藏，可选hidden|visible，默认值visible

隐藏相当于透明度为0

html
<svg width="400" height="240">
    <rect x="50" y="50" width="100" height="100" visibility="hidden" />
    <rect x="160" y="50" width="100" height="100" visibility="visible" />
</svg>

overflow ​

控制元素内的元素超出部分是否截掉，默认值visible

  • hidden：裁切到 width/height 矩形外（默认）
  • visible：不裁，画到哪算哪

transform ​

和css的transform一样使用，不过不用传单位

  • translate(x,y)

  • rotate(angle cx cy)

  • scale(sx,sy)

  • skewX / skewY

  • matrix(a,b,c,d,e,f)

注意：SVG 中变换顺序从左到右依次作用。

html
<svg width="400" height="240">
    <rect x="0" y="0" width="50" height="50" transform="translate(100, 10)" />
    <rect x="50" y="0" width="50" height="50" transform="rotate(45)" />
    <rect x="200" y="100" width="50" height="50" transform="scale(1.2)" />
</svg>

也可以复写

html
<svg width="400" height="240">
        <rect x="50" y="0" width="50" height="50" transform="translate(50,50) rotate(45) scale(1.5)" />
</svg>

pointer-events ​

装饰 ​

marker-start/mid/end ​

clip-path ​

mask ​

MIT Licensed

Copyright © 2024-present xarzhi