Javascript html 中文本 svg 的文本装饰

发布于08月14日

我有一个要加下划线的SVG文本元素.我使用了文本装饰属性，它起作用了.

enter image description here

<svg id="svg" viewBox="0 0 300 154">
    <text x="150" y="79" style="font-size: 80px; font-family: Brush Script MT" id="10"fill="#e00000" text-decoration="underline solid #0fc224">text</text>
</svg>

问题是，行的 colored颜色继承自文本(SVG)元素，即使在文本装饰属性中指定了所需的 colored颜色后，它似乎也不会更改.

推荐答案

显然，text-decoration-color不适用于SVG文本元素...

但是，您可以使用foreignObject作为支持完整CSS规范的常规(非SVG)DOM元素的容器:

.text {
  color: red;
  fill: red;
  font-size: 80px; 
  font-family: Brush Script MT;
  text-decoration: underline;
  text-decoration-color: blue;
}

<svg id="svg" viewBox="0 0 300 154">
  
  <foreignObject width="150" height="150">
    <span class="text">
      Text
    </span>
  </foreignObject>

  <text x="150" y="79" id="10" class="text"  >
    Text
  </text>

</svg>