- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
基本上我有一个包含两个 SVG 的网页。单击后,所选 SVG 将可见。
问题:如果先加载视口(viewport)为 0 0 20 20 的 SVG,笔划宽度为 2,然后再加载视口(viewport)为 0 0 2000 2000 ,第一个的stroke-width继承给第二个。第二个现在的笔画宽度为 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)。
有没有办法阻止 <defs>
两个 SVG 中的哪一个要“渗透”?
最佳答案
以防有人需要答案。这就是我最终这样做的方式。我从服务器获取 svg 作为字符串。比我使用带有 ID 的@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);
};
关于javascript - 防止 SVG CSS 流血,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56848032/
基本上我有一个包含两个 SVG 的网页。单击后,所选 SVG 将可见。 问题:如果先加载视口(viewport)为 0 0 20 20 的 SVG,笔划宽度为 2,然后再加载视口(viewport)为
不确定问题标题是否正确,但我需要帮助才能获得全宽图像。 我试过像这样添加一个 css 类: .img-edge{ margin-right: -15px; margin-left: -15px
在 Phaser 3 中添加图 block map 时,图 block 之间会出现明显的渗色(或间隙)。这有时被描述为瓷砖的“闪烁”或“闪烁”。 这在平移时通常更加突出。 const map = th
我有一个简单的设置 http://denishoctor.me/readertest.html (下面的代码也是如此)。该按钮会在嵌入的 pdf 上打开一个对话。这在除 IE6/7/8 之外的所有方面
我是一名优秀的程序员,十分优秀!