SVG <text>
SVG 文本 - <text>
<text> 元素用于定义文本。
实例 1
写一个文本:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red">I love SVG</text> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
实例 2
旋转的文字:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
实例 3
路径上的文字:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <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> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
实例 4
元素可以安排任何分小组与<tspan> 元素的数量。每个<tspan> 元素可以包含不同的格式和位置。几行文本(与 <tspan> 元素):
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="10" y="20" style="fill:red;">Several lines: <tspan x="10" y="45">First line</tspan> <tspan x="10" y="70">Second line</tspan> </text> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
实例 5
作为链接文本( <a> 元素):
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://www.w3schools.com/svg/" target="_blank"> <text x="0" y="15" fill="red">I love SVG</text> </a> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
SVG Stroke 属性
SVG Stroke 属性
SVG提供了一个范围广泛stroke 属性。在本章中,我们将看看下面:
- stroke
- stroke-width
- stroke-linecap
- stroke-dasharray
所有stroke属性,可应用于任何种类的线条,文字和元素就像一个圆的轮廓。
SVG stroke 属性
Stroke属性定义一条线,文本或元素轮廓颜色:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="blue" d="M5 40 l215 0" /> <path stroke="black" d="M5 60 l215 0" /> </g> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
SVG stroke-width 属性
Tstroke- width属性定义了一条线,文本或元素轮廓厚度:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black"> <path stroke-width="2" d="M5 20 l215 0" /> <path stroke-width="4" d="M5 40 l215 0" /> <path stroke-width="6" d="M5 60 l215 0" /> </g> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
SVG stroke-linecap 属性
strokelinecap属性定义不同类型的开放路径的终结:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
SVG stroke-dasharray 属性
strokedasharray属性用于创建虚线:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
SVG 滤镜
SVG滤镜用来增加对SVG图形的特殊效果。
SVG 滤镜
在本教程中,我们将仅展示一个可能采用的特殊效果。基础知识展示后,你已经学会使用特殊效果,你应该能够适用于其他地方。这里的关键是给你一个怎样做SVG的想法,而不是重复整个规范。
SVG可用的滤镜是:
- feBlend - 与图像相结合的滤镜
- feColorMatrix - 用于彩色滤光片转换
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset - 过滤阴影
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight - 用于照明过滤
- fePointLight - 用于照明过滤
- feSpotLight - 用于照明过滤
除此之外,您可以在每个 SVG 元素上使用多个滤镜!
SVG 模糊效果
注意: Internet Explorer和Safari不支持SVG滤镜!
<defs> 和 <filter>
所有互联网的SVG滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素(如滤镜)定义。
<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜?
SVG <feGaussianBlur>
实例 1
<feGaussianBlur> 元素是用于创建模糊效果:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
代码解析:
- <filter>元素id属性定义一个滤镜的唯一名称
- <feGaussianBlur>元素定义模糊效果
- in="SourceGraphic"这个部分定义了由整个图像创建效果
- stdDeviation属性定义模糊量
- <rect>元素的滤镜属性用来把元素链接到"f1"滤镜
原文:http://www.runoob.com/svg/svg-text.html
转自:SVG 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果
相关推荐
解决SVG画线line-polyline、矩形rect等线条的stroke-width=1px属性,显示结果变宽成为2px的问题,以及文字模糊的问题
安装npm install --save-dev gulp-svg-outline-stroke 用法const outlineStroke = require ( 'gulp-svg-outline-stroke' ) ;gulp . src ( '**/*.svg' ) . pipe ( outlineStroke ( ) ) . pipe ( gulp . dest ( './...
SVG排版-毛玻璃、磨砂玻璃模板效果
使用将描边的svg为概述版本的公共端点终点POST 参量input [必需] svg描边的代码以转换轮廓...rest? [可选参数]参见例子使用对svg代码进行url-encode ,但是如果使用例如则可以传递常规的svg代码curl -d " input=<...
AGG是一个开源的二维图形引擎,它提供了一个功能有限的SVG解析、...- 原来的代码对半透明属性fill-opacity、stroke-opacity的解析存在Bug:这两个属性必须位于fill、stroke的后面,否则无效。修改后的代码解决了该Bug。
做项目时,遇到动态修改某点的颜色,整理了个简单的,只需要四行HTML代码就能输出需要的圆点。利用svg简单实现在页面输出圆,可控制圆的填充颜色,大小。
不依赖javascript,直接使用纯css实现 svg 的描边绘制动画效果,效果演示动画。 基础知识: SVG中有个比较重要的属性分支 stroke ,中文软件中称为“描边”。和stroke相关的属性还有下面这些: 1、 stroke 表示...
这是15种效果非常酷的tab选项卡效果,使用的技术分别是html5 svg,css 伪元素,css transitions,每种效果都带有过渡动画,并且是响应式的。
插件可引用SVG文件并使用CSS语法控制其属性。 @svg-load nav url( img/nav.svg ) { fill : #cfc ; path :nth-child ( 2 ) { fill : #ff0 ; } } .nav { background : svg-inline (nav); } .up { background :...
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <circle id="circular-line-path" stroke-width="4" cx="19" cy="19" r="17"> </svg> <!-- straight line --> ...
svg2p5 将SVG标记转换为p5.js画布 svg2p5是一个转换器,它以<svg>标记或标记的形式接受SVG标记,并输出等效的画布代码。... 通过为不支持的属性添加SVG标记来防止错误,并通知用户并禁用转换(在这种
jquery-drawsvg是一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画的插件。该插件使用jQuery内置的动画引擎来使SVG元素中path元素产生动画,其底层实现使用的是stroke-dasharray和stroke-dashoffset属性。
SVG固定器 尝试通过将svg转换为填充/单一路径(并使其与字体兼容作为奖励)来修复它。将SVG描边转换为填充文档,安装和使用说明请在参阅完整的安装和使用说明文件。目标我想使用 , 和等工具将某些svg icons转换为...
SVG for C ++ 目的 这是一个仅标头的库,用于通过简单的C ++接口生成SVG文件。 它还可以执行一些重要任务,例如计算SVG元素的边界框或将多个图形合并在一起。 基本用法 #include "svg.hpp" #include int main() ...
CLI版本的安装npm i -g outline-stroke-cli用法outline-stroke logo.svg -o logo-outlined原料药轮廓笔画输入[标志]输入具有.svg文件的文件或文件夹的路径标志输出--output, -o Specify output file/folder 如果输入...
真正的Sketsa SVG Editor 7.1.1 windows版本!不是那些7.0.1的版本。破解方式和7.0.1一样,注意破解后要清理缓存目录。然后在启动后禁用模块。 可以用来修改iconfont的图标加粗,设置Stroke(边线)后,使用菜单...
DrawSVG 是一个轻量级的,简单的 jQuery 插件。这个插件用 jQuery 内置的动画引擎来转换已选择的<svg>元素内部每个的 stroke。 标签:DrawSVG
7.2-0.4,6.1,1.1c-1,1.5-4.1,2.7-2.5,4.1 c1.6,1.4,4.9-1.8,6,0.6c1.1,2.4,2.1,2.5,4.7,3.1c2.6,0.6,8.5,2.1,9.2,4.3c0.8,2.3,2.4,5.8,3.8,5.6c0.1,0,0.2,0,0.3,0.1 C456.8,266.6,456.8,262.4,456.2,261.5z" stroke-...