每当我使用文字轮廓或笔画时。它不起作用。我如何在文本标签中为文本(SVG TEXT)提供文本轮廓。
<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;
答案 0 :(得分:0)
<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;" 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;