在定义笔划时使用CSS（如较粗的svg文本）设置样式文本

Question

当属性＆＃34; stroke＆＃34;定义了svg文本，文本看起来更厚。

我在webkit，gecko和trident中得到了相同的结果。

我正在和一个使用svg的设计师合作，我希望得到他设计的相同结果，但是在html / css中。

示例：

<div>bla - html</div>
<div style="font-weight:bold">bla - html bold</div>
<svg height="30px"><text x="0" y="20">bla - svg</text></svg>
<svg height="30px"><text x="0" y="20" stroke="#000000">bla - svg stroke</text></svg>

结果截图：

如何在html / css中模拟？

Answer 1

如果您没有设置stroke-width，则对于1个像素，defaut值为 1 ：

试试这个：

<svg height="30px"><text x="0" y="20"  stroke-width="0" stroke="#000000">bla - svg stroke width 0</text></svg>
<svg height="30px"><text x="0" y="20"   stroke="#000000">bla - svg stroke no width defined</text></svg>
<svg height="30px"><text x="0" y="20"  stroke-width="1" stroke="#000000">bla - svg stroke width 1</text></svg>
<svg height="30px"><text x="0" y="20"  stroke-width="2" stroke="#000000">bla - svg stroke width 2</text></svg>

---

此时

text-stroke在webkit中实际上是可用的，使用供应商前缀。 text-fill也是如此。

在接近未来的情况下，它也可以在其他浏览器中使用，请在此处查看：http://caniuse.com/text-stroke

如何在webkit浏览器中使用它：

https://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke

---

目前

要在CSS中划线文字，您需要使用多个文字阴影来增加所需的阴影，使其变为完整的打击颜色。

http://codepen.io/anon/pen/xklIi/

（用于描边效果的阴影越大，它需要重复，重绘）

/* using CSS3 selector filters older browser, you can reset freely letter-spacing here */
  [data-stroke="1"] {/* class can be used */
  text-shadow:
    0 0 1px red,
    0 0 1px red,
    0 0 1px red,
    0 0 1px red,
    0 0 1px red,
    0 0 1px red,
    0 0 1px red,
    0 0 1px red,
    0 0 1px red;
}
[data-stroke="2"] {
  letter-spacing:2px /* you might need to reset letter-spacing to
  keep text readable */
  text-shadow:/* repeat until sharp enouggh */
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red;
}

HTML

<p data-stroke="1">bla - text stroke width 1</p>
<p data-stroke="2">bla - text stroke width 2</p>
<p data-stroke="2sharp">bla - text stroke sharp width 2</p>

Answer 2

SVG文本元素具有属性：stroke-width, stroke, and **fill**。

试试这个：

<svg id="mySVG" width="400" stroke="black" fill="red" height="400">
<text x=50 y=50 font-size="50"  >ABCD</text>
<text x=50 y=100 font-size="50" stroke="none"  >ABCD</text>
<text x=50 y=150 font-size="50" fill="red" >ABCD</text>
<text x=50 y=200 font-size="50" fill="none" stroke="green" >ABCD</text>
<text x=50 y=250 font-size="50" fill="red" stroke="green" >ABCD</text>
<text x=50 y=330 font-size="100" fill="red" stroke="black" stroke-width="5" >ABCD</text>