Javascript 防止出血

所以基本上我有一个有两个SVG的网页。单击后，所选SVG将可见

问题：如果先加载视口为0 0 20 20的SVG，且笔划宽度为2，然后加载视口为0 0 2000 2000的另一个SVG，则第一个SVG的笔划宽度将继承到第二个SVG。第二个现在的笔划宽度为2，而不是200

这就是容器的工作原理：

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

//svg 2
//svg 1

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>

.pen_style1{笔划：#000000；笔划宽度：0.25；}
.pen_style3{笔划：#C6C6；笔划宽度：0.125；笔划数组：1,0.5}
.pen_style4{笔划：#ff0000；笔划宽度：0.125；笔划数组：0.2,0.5,1,0.5}
.cos{stroke:#0037a0；}
.hiddenLine{display:none；}

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>

.pen_style1{笔划：#000000；笔划宽度：25；}
.pen_style3{笔划：#C6C6；笔划宽度：12.5；笔划数组：100,50}
.pen_style4{笔划：#ff0000；笔划宽度：12.5；笔划数组：20,50,100,50}
.cos{stroke:#0037a0；}
.hiddenLine{display:none；}

现在，

clearView容器中的SVG

从

techView容器中获取该容器的属性（如果先加载该容器（svg1））

是否有办法防止两名SVG的
通过？
以防有人需要回答。我就是这样做的。
<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>

我从服务器获取svg作为字符串。然后我使用了带有IDs的@DBSs解决方案（无法在服务器端实现，所以这里是：）

以防有人需要回答。我就是这样做的。
我从服务器获取svg作为字符串。然后我使用了带有IDs的@DBSs解决方案（无法在服务器端实现，所以这里是：）

是否需要在文档中内联这些元素？如果是，为什么？@kaido是的，因为svg是由服务器生成的。对于显示的每个图片，每个svg的画笔样式可能不同。这取决于用户设置。这并不理想，但是如果您正在生成SVGs服务器端，您可以通过向类中添加唯一的字符串来解决这一问题，这样每个SVG都有唯一的样式。什么样的交互？这对于我们了解这一点非常重要，以便我们能够为您提供最佳解决方案。如果它都是基于js的，那么您可以在iframe中加载svg图像，并且仍然在那里执行js，而不会泄漏到主文档。如果它需要一些主要的DOC到SVG的CSS链接，那么你必须把SVG内联起来，然后作为最后的手段，你可以考虑编辑SVGStLyEnter元素的样式表，从而使它的所有规则更加具体。你是否可以向SVGS本身添加一个ID，使CSS更具体？e、 g.
#svg1.pen_样式1
？我认为，如果不对SVG或SVG的加载方式进行任何更改，您就无法做到这一点。浏览器总是在应用CSS之前解析所有CSS，因此第二个内联SVG的样式总是覆盖文档上的重复标识符。是否需要在文档中内联这些元素？如果是，为什么？@kaido是的，因为svg是由服务器生成的。对于显示的每个图片，每个svg的画笔样式可能不同。这取决于用户设置。这并不理想，但是如果您正在生成SVGs服务器端，您可以通过向类中添加唯一的字符串来解决这一问题，这样每个SVG都有唯一的样式。什么样的交互？这对于我们了解这一点非常重要，以便我们能够为您提供最佳解决方案。如果它都是基于js的，那么您可以在iframe中加载svg图像，并且仍然在那里执行js，而不会泄漏到主文档。如果它需要一些主要的DOC到SVG的CSS链接，那么你必须把SVG内联起来，然后作为最后的手段，你可以考虑编辑SVGStLyEnter元素的样式表，从而使它的所有规则更加具体。你是否可以向SVGS本身添加一个ID，使CSS更具体？e、 g.
#svg1.pen_样式1
？我认为，如果不对SVG或SVG的加载方式进行任何更改，您就无法做到这一点。浏览器总是在应用CSS之前解析所有CSS，因此第二个内联SVG的样式总是覆盖文档后面的重复标识符。