Отображение тега SVG с использованием только стилей внутри другого тега SVG

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>