Question

所以基本上我有一个包含两个SVG的网页。单击后，将显示所选的SVG。

问题：如果先加载视口 0 0 20 20 的SVG，并且笔划宽度为2，然后再加载视口 0 0 2000 2000 的另一个SVG。 em>，第一个的笔划宽度继承到第二个。第二个现在的笔划宽度为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>

现在，clearView-container中的SVG从techView-container获取了其中一个的属性，如果该（svg1）首先被加载。

是否可以防止两个SVG的<defs>“渗漏”？

Answer 1

万一有人需要答案。这就是我最终这样做的方式。我从服务器获取svg作为字符串。比起我使用@DBSs解决方案和ID（不能在服务器端做到这一点，这里是：）

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);
};

防止SVG CSS出血

1 个答案: