Question

每当我使用文字轮廓或笔画时。它不起作用。我如何在文本标签中为文本（SVG TEXT）提供文本轮廓。

＆＃13;

 <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>

＆＃13;

Answer 1

<clipPath>中包含的任何内容仅用于形成剪切路径。它永远不会被渲染。

如果你想要它也被渲染，那么你需要再次将它包含在一个单独的对象中。

＆＃13;

<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>

＆＃13;

为什么文字大纲不适用于我的svg？

1 个答案: