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属性进行了测试：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>

svg笔触文本在foreignObject内不起作用

1 个答案: