一个HTML页面上的两个SVG相互影响
一个HTML页面上的两个SVG相互影响
提问于 2021-08-14 21:53:23
我在同一个html页面上有两个SVG元素。如果我将第二个SVG的值设置为svg/defs/clipPath/rect.width，那么它也会影响第一个SVG元素的宽度。我确保了两个SVG之间的did和Dataname是唯一的(至少我认为我是这样做的)。
这是第一个SVG -这个SVG在屏幕上显示一个条形图。当我按照描述设置下一个SVG的width属性时，它会受到影响。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 440.748 25.655">
<defs>
<clipPath id="stc-headerclip-path">
<rect width="440.748" height="25.655" fill="none" />
</clipPath>
</defs>
<g id="stc-headerArtboard_6" data-name="stc-headerArtboard 6" clip-path="url(#clip-path)">
<path id="stc-headerPath_294" data-name="stc-headerPath 294"
d="M1.038,25.2C-.134,8.621,16.252-.089,31.578,4.656a144.046,144.046,0,0,0,41.79,6.058H219.815v2.792H73.229c-11.557,0-44.833-4.076-50.36,6.979C16.28,15.516,7.291,18.084,1.038,25.2Z"
transform="translate(-0.979 0.452)" fill="#9c1f2e" fill-rule="evenodd" />
</g></svg>这是第二个SVG -在rect元素上设置width属性会影响第一个SVG的宽度。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="137.883" height="30"
viewBox="0 0 137.883 30">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_3" data-name="Rectangle 3" width="100" height="29.3" />
</clipPath>
</defs></svg>你知道为什么会发生这种情况，以及如何修复它吗？
回答 1
Stack Overflow用户
发布于 2021-08-14 23:23:10
这是因为您的第一个svg引用了第二个svg的#clip-path：
<g id="stc-headerArtboard_6" data-name="stc-headerArtboard 6" clip-path="url(#clip-path)">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68787297
复制相关文章
相似问题
腾讯云开发者
