在另一个 SVG 标记内仅显示带有样式的 SVG 标记答案

【问题标题】：Showing SVG tag with just styles inside another SVG tag在另一个 SVG 标记内仅显示带有样式的 SVG 标记
【发布时间】：2019-07-18 03:18:04
【问题描述】：

我正在尝试在另一个 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 中仅显示 svg 和 style 标记？

【问题讨论】：

你可以像这样设置只有根 svg 元素

标签： css google-chrome svg

【解决方案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>

【讨论】：