svg笔划文本在foreignObject中不起作用

Question

在下面的代码中，我想要在文本中添加stoke，但是它不起作用。

// the html code
<article class="module article-3">
   <svg width="100%" height="100%">
     <foreignObject  width="100%" height="100%">
         <div xmlns="http://www.w3.org/1999/xhtml">something words.....</div>
     </foreignObject>
   </svg>
 </article>

// the css code
.article-3 text {
     stroke-width: 6px;
     stroke: black;
}

是否有一些方法可以存储文本并确保文本可以自动换行？(使用javascript除外)我已经使用css属性: text-shadow进行了测试，但是，text-shadow的性能不会很好。

Answer 1

可以选择使用-webkit-text-stroke

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

它可以在大多数浏览器上运行。但它不是标准化的，将来可能会消失。你是否愿意冒这个险由你自己决定。

​

.article-3 div {
  font-size: 30px;
  font-weight: bold;
  -webkit-text-stroke: 1px red;
}

<article class="module article-3">
   <svg width="100%" height="100%">
     <foreignObject  width="100%" height="100%">
         <div xmlns="http://www.w3.org/1999/xhtml">something words.....</div>
     </foreignObject>
   </svg>
</article>

​