Предотвратить SVG CSS кровотечение

Question

Так что в основном у меня есть веб-страница с двумя SVG.При щелчке выбранный SVG будет виден.

Проблема: если сначала загружен SVG с окном просмотра 0 0 20 20 и имеет ширину штриха 2, а затем вы загружаете другой SVGс окном просмотра 0 0 2000 2000 ширина первого хода наследуется второму.У 2-го теперь ширина хода 2 вместо 200.

Вот как выглядят контейнеры:

<div class="clearView-container">
  // svg 2
</div>
<div class="techView-container" style="display: none;">
  // svg 1
</div>

svg1:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="273.263mm" height="210.784mm" viewBox="-49.35 -56.0421 136.632 105.392">

<defs>
 <style type="text/css">
 .pen_style1 {stroke: #000000;stroke-width: 0.25;}
 .pen_style3 {stroke: #c6c6c6;stroke-width: 0.125;stroke-dasharray: 1, 0.5}
 .pen_style4 {stroke: #ff0000;stroke-width: 0.125;stroke-dasharray: 0.2, 0.5, 1, 0.5}
 .cos {stroke: #0037a0;}
 .hiddenLine {     display: none;   }
 </style>
</defs>

svg2:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="127.46mm" height="104.6mm" viewBox="-3214 -2698 6373 5230">

<defs>
 <style type="text/css">
 .pen_style1 {stroke: #000000;stroke-width: 25;}
 .pen_style3 {stroke: #c6c6c6;stroke-width: 12.5;stroke-dasharray: 100, 50}
 .pen_style4 {stroke: #ff0000;stroke-width: 12.5;stroke-dasharray: 20, 50, 100, 50}
 .cos {stroke: #0037a0;}
 .hiddenLine {     display: none;   }
 </style>
</defs>

И теперь SVG в clearView-container получает свойства одного из techView-container, если этот (svg1) загружается первым.

Есть ли способ предотвратить "утечку" <defs> из двух SVG? *

Answer 1

На случай, если кому-то нужен ответ. Вот как я это сделал. Я получаю svg с сервера в виде строки. Чем я использовал решение @DBSs с идентификаторами (не могу сделать это на стороне сервера, так что вот оно:)

function _injectCustomCSS (svg: string): string {
  const newID = 'id' + MathLib.hashCode(svg);
  const replaceStr = /.pen/g;
  const svgDoc = new DOMParser().parseFromString(svg, 'image/svg+xml');
  svgDoc.getElementsByTagName('svg')[0].setAttribute('id', newID);
  svgDoc.getElementsByTagName('style')[0].textContent = svgDoc.getElementsByTagName('style')[0].textContent.replace(replaceStr, '#' + newID + '>.pen');

  /* ... */
  return new XMLSerializer().serializeToString(svgDoc);
};