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

Question

下面的代码，我想给文本添加描边，但是它不起作用。

// 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 property: 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>