请问多个svg之间如何隔离样式冲突?

Question

<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
   <style type="text/css">
      .st1{fill="#FFFFFF"}
    </style>
  <circle class="st1"  cx="238.1" cy="190.3" r="147.1"/>
</svg>


<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
   <style type="text/css">
      .st1{fill="#000"}
    </style>
  <circle class="st1"  cx="238.1" cy="190.3" r="147.1"/>
</svg>

2个svg内部都有一个.st1的样式, 最终图形的颜色都是#000, 请问可以不改class名字进行隔离吗?

Answer 1

style 标签设置scoped 私有属性

Answer 2

在用个容器包裹svg里的元素，每个容器的class不一样
.container1 .st1

Answer 3

思路：转image

实现：image.src = URL.createObjectURL(new Blob([svgText], {type: 'image/svg+xml'}));

如需改变svg的颜色，实现如下：

const parser = new DOMParser();
const doc = parser.parseFromString(svgText, 'image/svg+xml');
const el = doc.documentElement;

el.style.fill = color;

image.src = URL.createObjectURL(new Blob([el.outerHTML], {type: 'image/svg+xml'}));