CODEWITHSUNDEEP
htmlsvg
Caspian Strider
Caspian Strider

Reputation: 1

Two SVGs on one HTML page are affecting each other

I have the two SVG elements on the same html page. If I set the second SVG's value of svg/defs/clipPath/rect.width then it affects the width of the first SVG element as well. I made sure that IDs and Datanames between the two SVGs are unique (at least I think I did).

This is the first SVG - this SVG displays a bar across the screen. It gets affected when I set the next SVG's width property as described.

<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>

This is the second SVG - setting the width property on the rect element affects the first SVG's width.

<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>

Any idea why this is happening and how to fix it?

Upvotes: 0

Views: 995

Answers (1)

vanowm
vanowm

Reputation: 10201

This is because your first svg is referenced to #clip-path of second svg:

<g id="stc-headerArtboard_6" data-name="stc-headerArtboard 6" clip-path="url(#clip-path)">

Upvotes: 1

Related Questions