SVG的样式属性和CSS的语法非常接近,有时甚至是一样的,经常会照成一些使用上的混乱。
注意,我们在这里讨论的是用于SVG代码本身出现的规则,而不是SVG被嵌入网页后被附加上去的规则样式。然而,如果你想从CSS属性来了解SVG,比较他们的语法规则是一种有效果的方法。
SVG | 等效的CSS |
fill | background-color或color |
fill-opacity | background-color或color设置rgba/hsla |
opacity | opacity |
stroke | border-color |
stroke-width | border-thickness |
stroke-opacity | border-color设置rgba |
rx, ry | border-radius |
下面的属性在SVG和CSS中是一样的,只是在SVG的transformations和dimensions中稍有区别:
-
font-family
,font-size
,font-style
,font-variant
和font-weight
-
width
和height
-
scale
,rotate
,skew
大多数的这些属性可以作为SVG样式规则的一部分,如果你想实现类似CSS背景色的效果,这可能是最简单的实现方法。来看下面的一段SVG代码:
<svg width="300" height="170" style="float: left"> <rect x="10" y="5" rx="15" width="280" height="160" style="fill: #a73838; fill-opacity: 0.65; stroke: #000; stroke-width: 10; stroke-dasharray: 22, 2, 2; ry: 15;"/> <text x="130" y="115" fill="yellow" font-size="100" style="font-family: Blue Highway, Arial Black, sans-serif; stroke: black; stroke-width: 2;">SVG</text> </svg> <p>Test paragraph</p>
你可以看到下边的结果:
CSS和SVG之间的渐变方式是有所不同的,你可以自行去查阅这方面的资料。
注意,我们在SVG中不用指定单位,至少上面的代码中就没有指定,它默认的单位是像素。
看到这里,你不要认为SVG的规则样式是CSS样式的更简单的表现形式。SVG提供了很多控制方式,如上所述,SVG可以绘制出各种形式的虚线,而且不像CSS3的border-image那样复杂。看到这里你应该可以开始给你自己的SVG添加样式了。
相关推荐
删除-svg-属性 从 SVG 中删除属性和样式 安装 ... inline : true如果您不想删除内联样式属性,请设置为 false properties : []要删除的属性数组。 有关更多信息,请参阅下面的属性部分。 namesp
利用contenteditable属性,div标签里的文本将可以编辑。借助execCommand,div标签的字体样式可以动态调整。源代码中包含了计算HTML文本结构、判断换行等功能,生成跟HTML所见一模一样的SVG文本。
选择演示文稿属性和内联CSS样式属性(用于填充和描边的颜色/字母;描边宽度) 变换(平移,缩放,旋转,skewX,skewY,矩阵) 输出格式 ASS对话框行是根据以下模式生成的: Dialogue: Layer,Start,End,Style,Name,...
效果描述: 现在很多手机版网页,或者比较高版本的页面中,我们经常碰到一中圆形的百分比进度... 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可 (css3特效,不支持低版本浏览器)
该gem添加了Rails帮助器方法( inline_svg_tag和inline_svg_pack_tag ),该方法读取SVG文档(通过Sprockets或Webpacker,因此可与Rails Asset Pipeline一起使用),将CSS类属性应用于文档的根,然后将其嵌入视图中...
对于没有样式属性的SVG(例如要组合成符号精灵的属性),这应该可以正常工作。 对于其他任何事情,结果都会是命中注定的。用法要求Node.js> = 10安装npm install --save svg-fillAPI 简单用法: const SvgFill = ...
CSS3 SVG水中月亮倒影动画特效是一款基于CSS3 Filter属性svg制作水中月亮倒影波纹特效。
利用contenteditable属性,div标签里的文本将可以编辑。借助execCommand,div标签的字体样式可以动态调整。源代码中包含了计算HTML文本结构、判断换行等功能,生成跟HTML所见一模一样的SVG文本。 yarn install ...
svg-to-vue-component为什么在将.svg文件作为Vue组件而不是使用URL导入文件时,可以使用CSS对其进行样式设置,并向该组件添加其他DOM属性或事件处理...后者仅支持生成的组件上的类和样式属性,而我们支持所有DOM属性。
JavaScript 动画:通过 JavaScript 操作 DOM 元素的样式属性,实现更复杂、交互性更强的动画效果。常见的库包括 jQuery、Anime.js、GreenSock(GSAP)等,它们提供了丰富的动画函数和效果,使动画开发更加高效。 ...
使用各个样式属性(例如,fill =“ red”而不是style =“ fill:red;”)的SVG文件呈现了一些合理的信息。 许多样式属性尚未实现。 缺少许多整个功能区域(例如,过滤器,渐变,字体,标记等)。 但是,如果您确实...
psawsvg.py-实际代码,该代码读取当前层的样式属性并将PSAW属性附加到该属性。 如果图层已经具有PSAW属性,则这些属性将被覆盖,因此不必担心重复的条目。 安装 将两个文件复制到您的inkscape扩展目录中: Linux...
JavaScript 动画:通过 JavaScript 操作 DOM 元素的样式属性,实现更复杂、交互性更强的动画效果。常见的库包括 jQuery、Anime.js、GreenSock(GSAP)等,它们提供了丰富的动画函数和效果,使动画开发更加高效。 ...
NXSVG networkx 图形的原生 SVG 渲染器 nxsvg 依赖于 svgwrite; 但不依赖于graphviz。 如果 graphviz 依赖不是问题,nxpd 可以生成更好的数字。... 节点和边可以使用 svg 表示属性进行样式设置。 看到它在行动:
SVG模型表示用于在2D画布上绘制的SVG的简化模型。 在构建SVG渲染器时,这很有用。怎么运行的所有SVG元素都将转换为平面路径... 组属性(例如,样式,变换)已应用于每个路径。 路径简化为精确绘图所需的最少命令集。
SVG 的 原因 之后,我在 Vue.js 中找到了一个用 SVG 替换图标字体的解决方案,同时仍能保持使用图标字体的灵活性和易用性——能够使用 CSS 轻松改变图标的大小、颜色以及其它属性。 一种流行的方法是使用 v-html ...
:ear_with_hearing_aid:可访问:SVG带有ARIA属性,可以由屏幕阅读器读取。into粘贴到设计工具中:SVG可以在Illustrator,Figma,Sketch等设计工具中使用。:link:交互式:仍可单击链接。:package:自包含:内联图像,...
react-mt-svg-lines使您的SVG栩栩如生现场演示React.js...工作原理该组件包装了SVG,并在其中的每个路径元素上对stroke-dashoffset属性进行了动画处理。 为此,它将注入带有生成CSS字符串的样式标签。 对于技术的描述