svg path 样式_SVG基本样式属性

svg path 样式

Styles in SVG often come very close to CSS syntax – sometimes exactly the same, often just different enough to cause confusion.

SVG中的样式通常非常接近CSS语法–有时是完全相同的，但有时恰好足以引起混淆。

It’s important to note that here we are talking about rules for appearance used in the SVG code itself, not rules that may be applied to the SVG after it has been embedded on the web page. However, if you come to SVG from an understanding of CSS it is useful to compare and contrast style properties between the two:

重要的是要注意，这里我们谈论的是SVG代码本身中使用的外观规则，而不是嵌入到网页中之后可能会应用于SVG的规则。 但是，如果您是从CSS的角度来学习SVG的，那么在两者之间比较和对比样式属性将非常有用：

SVG	CSS Equivalent
fill	background-color or color, (depending on context)
fill-opacity	background-color or colorwith rgba/hsla, (depending on context)
opacity	opacity
stroke	border-color
stroke-width	border-thickness
stroke-opacity	border-color with rgba
rx, ry	border-radius

SVG	等效CSS
fill	background-color或color ， (取决于上下文)
fill-opacity	background-color或带有rgba / hsla的 color ， (取决于上下文)
opacity	不透明
stroke	border-color
stroke-width	border-thickness
stroke-opacity	border-color与RGBA
rx, ry	边界半径

The following properties remain the same in styles implemented in SVG or CSS, although the syntax is slightly different for transformations and dimensions in SVG:

下列属性在SVG或CSS中实现的样式中保持不变，尽管SVG中的转换和尺寸的语法略有不同：

• font-family, font-size, font-style, font-variant and font-weight

  font-family ， font-size ， font-style ， font-variant和font-weight

• width and height

  width和height

• scale, rotate, skew

  scale ， rotate ， skew

Most of these properties can be applied as part of an SVG style, and if you come from a CSS background, that’s probably the easiest way to approach the code. I’ve used those that must appear in attribute form in the code sample below:

这些属性中的大多数都可以作为SVG样式的一部分来应用，如果您来自CSS背景，那可能是处理代码的最简单方法。 我已经使用了必须在下面的代码示例中以属性形式显示的代码：

<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>

Produces what you see here:

产生您在这里看到的内容：

Gradients are substantially different between CSS and SVG, enough to require their own article.

CSS和SVG之间的渐变有很大的不同，足以需要他们自己的文章。

Note that we don’t have to specify units in SVG, at least in the code I’ve shown here: pixels are always assumed.

请注意，至少在我在此处显示的代码中，我们不必在SVG中指定单位：始终假定像素。

You should not come away from this article convinced that styles in SVG are simply “CSS done another way”. SVG provides many controls – as you can see, SVG strokes can include many forms of customized dashes, without any of the complications of CSS3’s border-image – but this should be enough to get you started in styling your SVG content.

您不应偏离本文，坚信SVG中的样式只是“ CSS另辟way径”。 SVG提供了许多控件-如您所见，SVG笔划可以包括许多形式的自定义破折号，而不会带来CSS3 border-image任何复杂性-但这足以使您开始设计SVG内容的样式。

翻译自: https://thenewcode.com/512/Basic-SVG-Style-Properties

svg path 样式