SVG的几个标签元素

Easter79
• 阅读 572

defs

svg允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的元素定义在defs元素里面。这样做可以增加svg内容的易读性和可访问性。在defs元素定义的元素不会直接呈现。你可以在你的视口的任意地方利用元素呈现这些元素。

用法：

类别： 容器元素，结构元素

允许的内容物： 任意数量、任意排序的下列元素：动画元素、描述性元素、形状元素、结构化元素、渐变元素、 <a>, <altGlyphDef>, <clipPath>, <colorprofile>, <cursor>, <filter>, <font>, <fontface>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

实例：

<svg width="80px" height="30px" viewBox="0 0 80 30"
     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="10" 
        fill="url(#Gradient01)"  />
</svg>

pattern

使用预定义的图形对一个对象进行填充或描边，就要用到pattern元素。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复(或平铺)从而覆盖要涂色的区域。先使用pattern元素定义图案，然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。

用法：

类别： 容器元素

允许的内容物： 任意数量、任意排序的下列元素：动画元素、描述性元素、形状元素、结构化元素、渐变元素、<a>, <altGlyphDef>, <clipPath>, <colorprofile>, <cursor>, <filter>, <font>,  <fontface>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

marker

marker元素定义了在特定的<path>元素、<line>元素、<polyline>元素或者<polygon>元素上绘制的箭头或者多边标记图形。

用法：

类别： 容器元素

允许的内容物：任意数量、任意排序的下列元素：动画元素、描述性元素、形状元素、结构化元素、渐变元素、 <a>, <altGlyphDef>, <clipPath>, <colorprofile>, <cursor>, <filter>, <font>, <fontface>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

filter

属性filter定义了由<filter>元素定义滤镜效果，该滤镜效果将应用到该元素上。

作为一个外观属性，它可以直接用作CSS样式表内部的属性。请阅读css filter以了解更多信息。

用法：

类别： 外观属性

值：  | none | inherit

可变性： YES

规范文档： SVG 1.1 (2nd Edition)

元素的引用，它定义了将要应用到该元素的滤镜效果。none不对该元素应用任何滤镜效果。

下列元素可以使用filter属性：图形元素 »、[<a>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fa)、``[<defs>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fdefs)、``[<glyph>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fglyph)、``[<g>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fg)、``[<marker>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fmarker)、``[<missing-glyph>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fmissing-glyph)、``[<pattern>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fpattern)、``[<svg>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fsvg)、``[<switch>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fswitch)、<symbol>

feColorMatrix

该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值(一个表示为[红,绿,蓝,透明度] 的矢量) 都经过矩阵乘法 (matrix multiplated) 计算出的新颜色。

用法：

类别： 滤镜元素

允许的内容物： 任意数量、任意排序的下列元素：<animate>, [<set>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fset)

SVG的几个标签元素 SVG的几个标签元素 

<svg width="100%" height="100%" viewBox="0 0 150 360"
 preserveAspectRatio="xMidYMid meet"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <text x="70" y="50">Reference</text>
  <g>
    <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
    <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
  </g>


  <text x="70" y="120">matrix</text>

  <filter id="colorMeMatrix">
    <feColorMatrix in="SourceGraphic"
      type="matrix"
      values="0 0 0 0 0
              1 1 1 1 0
              0 0 0 0 0
              0 0 0 1 0" />
  </filter>

  <g filter="url(#colorMeMatrix)">
    <circle cx="30" cy="100" r="20" fill="blue"  fill-opacity="0.5" />
    <circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="120" r="20" fill="red"   fill-opacity="0.5" />
  </g>


  <text x="70" y="190">saturate</text>

  <filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic"
      type="saturate"
      values="0.2" />
  </filter>

  <g filter="url(#colorMeSaturate)">
    <circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" />
    <circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" />
  </g>


  <text x="70" y="260">hueRotate</text>

  <filter id="colorMeHueRotate">
    <feColorMatrix in="SourceGraphic"
      type="hueRotate"
      values="180" />
  </filter>

  <g filter="url(#colorMeHueRotate)">
    <circle cx="30" cy="240" r="20" fill="blue"  fill-opacity="0.5" />
    <circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="260" r="20" fill="red"   fill-opacity="0.5" />
  </g>


  <text x="70" y="320">luminanceToAlpha</text>

  <filter id="colorMeLTA">
    <feColorMatrix in="SourceGraphic"
      type="luminanceToAlpha" />
  </filter>

  <g filter="url(#colorMeLTA)">
    <circle cx="30" cy="310" r="20" fill="blue"  fill-opacity="0.5" />
    <circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="330" r="20" fill="red"   fill-opacity="0.5" />
  </g>
</svg>

示例

foOffset

该输入图像作为一个整体，在属性[dx](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FAttribute%2Fdx)和属性[dy](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FAttribute%2Fdy)的值指定了它的偏移量。

用法：

类别： 滤镜元素

允许的内容物： 任意数量、任意排序的下列元素：<animate>, <set>

feMerge

feMerge滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果。利用[result](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FAttribute%2Fresult)存储别的滤镜的输出可以实现这一点，然后在一个 <feMergeNode>子元素中访问它。

用法：

类别： 滤镜元素

允许的内容物： 任意数量、任意排序的下列元素：<feMergeNode>

feMergeNode

feMergeNode元素拿另一个滤镜的结果，让它的父<feMerge>元素处理。

用法：

类别： 无

允许的内容物： 任意数量、任意排序的下列元素：<animate>, <set>

SVG相关资料网站：https://developer.mozilla.org/en-US/docs/Web/SVG

httpsmozillasvg前端前端
点赞
收藏
评论区
推荐文章
blmius blmius
•
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s
4133
0
0
待兔 待兔
•
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
1073
0
0
Wesley13 Wesley13
•
3年前
JQ选择器
如果你想寻找id以“sub\_”开头的元素，你可以使用：$("id^'sub_'")如果你想寻找id以“trim”结尾的元素，你可以使用：$("id$'trim'")要获得id包含“AAA”的元素，需要使用(这比遍历要快)$("id'trim'")可以指定元素类型input或者其他标签
831
0
0
Stella981 Stella981
•
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法，以百度首页为例子。0.元素定位方法主要有：id定位：find\_element\_by\_id('')name定位：find\_element\_by\_name('')class定位：find\_element\_by\_class\_name(''
949
0
0
Stella981 Stella981
•
3年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time，和datetime两个，本文先说time模块。关于时间戳的几个概念时间戳，根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组（struct_time），包含9个元素。 time.struct_time(tm_y
1258
0
0
Stella981 Stella981
•
3年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。⑵下面是常用的属性以及描述：!(https://oscimg.oschina.net/oscnet/00cb565
737
0
0
Wesley13 Wesley13
•
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
1524
0
0
Stella981 Stella981
•
3年前
SVG的几个标签元素
defssvg允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的元素定义在defs元素里面。这样做可以增加svg内容的易读性和可访问性。在defs元素定义的元素不会直接呈现。你可以在你的视口的任意地方利用<use元素呈现这些元素。用法：类别：容器元素，结构元素允许的内容物： 任意数量、任意
503
0
0
京东云开发者 京东云开发者
•
1年前
分布式系统的主键生成方案对比 | 京东云技术团队
UUID​UUID（通用唯一识别码）是由32个十六进制数组成的无序字符串，通过一定的算法计算出来。为了保证其唯一性，UUID规范定义了包括网卡MAC地址、时间戳、名字空间（Namespace）、随机或伪随机数、时序等元素，以及从这些元素生成UUID的算法。
423
0
0
Python进阶者 Python进阶者
•
10个月前
Excel中这日期老是出来00：00：00，怎么用Pandas把这个去除
大家好，我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下：这日期老是出来00：00：00，怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下：pd.toexcel之前把这
511
0
0
Easter79
Easter79
Lv1
今生可爱与温柔，每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k
热门文章
uni app video、视频播放开发
tmux的复制粘贴
tableau地图源之高德地图
storybook配置之基本配置和webpack配置
twint 安装及使用