Question

我正尝试在另一个svg元素内显示仅带有style标签的svg元素，如下所示。

<svg class="root-svg" width="500" height="200">
  <svg class="card-background" width="100%" height="100%" style="opacity: 0.79; box-sizing: border-box; border-width: 2px; border-style: solid; border-radius: 15px; background: url(&quot;https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeaeGue0HlHLYRj5wYeUdYO1_geor9C3EvRh-nRzell6MbifcKrg&quot;) center center no-repeat;"> 
  </svg>
</svg>

Codepen

但是svg内部的内容没有显示。但是，当我仅在svg内部显示时，它显示为例外。如何在另一个svg中显示仅带有style标签的svg？

Answer 1

您是否尝试过为内部svg添加名称空间？

<svg class="root-svg" width="500" height="200" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  class="card-background" width="100%" height="100%" style="opacity: 0.79; box-sizing: border-box; border-width: 2px; border-style: solid; border-radius: 15px; background: url(&quot;https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeaeGue0HlHLYRj5wYeUdYO1_geor9C3EvRh-nRzell6MbifcKrg&quot;) center center no-repeat;"> 
</svg>
</svg>

在另一个SVG标签内显示样式简单的SVG标签

1 个答案: