なぜ私のsvgでテキストのアウトラインが機能しないのですか？

Question

私はテキストのアウトラインまたはストロークをスタイルで使用します。それは仕事ではありません。どのように私のテキスト（SVGテキスト）テキストのテキストの輪郭を与えることができます。あなたは<clipPath>に含める

<div class="slides2"> 
 
    <img class="" src="//cdn.shopify.com/s/files/1/0797/1743/products/HK-CK_28785899-10b3-4f49-88be-975a69089e52_1024x1024.JPG?v=1464803870"> 
 
    <div class="custom"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="410" height="70" viewBox="0 0 2326 460"> 
 
    <defs> 
 
     <clipPath id="my-path"> 
 
     <text id="texty" style="font-weight:bold;text-outline: 2px 2px #ff0000;" x="60" y="300" font-size="350">SVG TEXT</text> 
 
     </clipPath> 
 
    </defs> 
 
    <image xlink:href="Mother of Pearl.JPG" clip-path="url(#my-path)" width="100%" height="100%" id="filler" preserveAspectRatio="none"></image> 
 
    </svg> 
 
</div> 
 
</div>

Answer 1

何をクリッピングパスを形成するためにのみ使用されます。それは決してレンダリングされません。

レンダリングする場合は、別のオブジェクトとして再度レンダリングする必要があります。

<div class="slides2"> 
 
    <img class="" src="//cdn.shopify.com/s/files/1/0797/1743/products/HK-CK_28785899-10b3-4f49-88be-975a69089e52_1024x1024.JPG?v=1464803870"> 
 
    <div class="custom"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="410" height="70" viewBox="0 0 2326 460"> 
 
    <defs> 
 
     <clipPath id="my-path"> 
 
     <text id="texty" style="font-weight:bold;" x="60" y="300" font-size="350">SVG TEXT</text> 
 
     </clipPath> 
 
    </defs> 
 
    <image xlink:href="Mother of Pearl.JPG" clip-path="url(#my-path)" width="100%" height="100%" id="filler" preserveAspectRatio="none"></image> 
 

 
    <text id="texty" style="font-weight:bold; stroke: #f00; stroke-width: 2;" x="60" y="300" font-size="350">SVG TEXT</text> 
 
    </svg> 
 
</div> 
 
</div>