基本的SVG样式属性

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-variantfont-weight
  • widthheight
  • 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>

你可以看到下边的结果:screenshot-www htmleaf com 2016-08-10 22-03-28

CSS和SVG之间的渐变方式是有所不同的,你可以自行去查阅这方面的资料。

注意,我们在SVG中不用指定单位,至少上面的代码中就没有指定,它默认的单位是像素。

看到这里,你不要认为SVG的规则样式是CSS样式的更简单的表现形式。SVG提供了很多控制方式,如上所述,SVG可以绘制出各种形式的虚线,而且不像CSS3的border-image那样复杂。看到这里你应该可以开始给你自己的SVG添加样式了。

 

更多参考:

SVG 入门教程系列列表

SVG动画入门

SVG动画入门(二)

SVG技术入门:线条动画实现原理

如何使用CSS来修改SVG原点和制作SVG动画

纯CSS实现帅气的SVG路径描边动画效果

SVG矢量绘图 path路径详解(基本画法)

SVG矢量绘图 path路径详解(贝塞尔曲线及平滑)

Web流程图绘制使用raphael

 

本文:基本的SVG样式属性