Текст штриха 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: 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>