With Copy SVG Code, linear-gradient is not unique
If you have two things on a page that both have gradients in the background (see attached screenshot), the gradient for the first thing will be used on both. I did some testing and it looks like the ID on <linearGradient> and the fill="url(#linear-gradient)" on <rect> is the problem. If you change the "linear-gradient" on the second svg to "linear-gradient2", it fixes the problem.
Can you change the "Copy SVG Code" functionality to make that "linear-gradient" value unique, like you did with stuff like "Group16" and "Rectangle5"?
Example code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200">
<defs>
<linearGradient id="linear-gradient" x1="-0.804" y1="-0.902" x2="1" y2="1.11" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#b13393"/>
<stop offset="1" stop-color="#149bd7"/>
</linearGradient>
</defs>
<g id="Group_16" data-name="Group 16" transform="translate(-399 -372)">
<rect id="Rectangle_5" data-name="Rectangle 5" width="200" height="200" rx="10" transform="translate(399 372)" opacity="0.996" fill="url(#linear-gradient)"/>
<text id="Yes" transform="translate(454 496)" fill="#fff" font-size="57" font-family="Arboria-Bold, Arboria" font-weight="700"><tspan x="0" y="0">Yes</tspan></text>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200">
<defs>
<linearGradient id="linear-gradient" x1="0.089" y1="-0.051" x2="2.046" y2="2.011" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#b13393"/>
<stop offset="1" stop-color="#149bd7"/>
</linearGradient>
</defs>
<g id="Group_17" data-name="Group 17" transform="translate(-715 -372)">
<rect id="Rectangle_29" data-name="Rectangle 29" width="200" height="200" rx="10" transform="translate(715 372)" opacity="0.999" fill="url(#linear-gradient)"/>
<text id="No" transform="translate(778 496)" fill="#fff" font-size="57" font-family="Arboria-Bold, Arboria" font-weight="700"><tspan x="0" y="0">No</tspan></text>
</g>
</svg>
Joe Steinbring
shared this idea
-
AdminLetitia Antohe
(Admin, Adobe)
commented
Hi Joe,
Thank you for posting. I'm trying to understand a little bit what is your workflow and what you are trying to achieve. Can you share the context?
One note I have is that if you select both rectangles from your example and choose "Copy SVG Code", then 2 linear gradients will have unique IDs. Check the example below:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="443" viewBox="0 0 200 443">
<defs>
<linearGradient id="linear-gradient" x1="-0.804" y1="-0.902" x2="1" y2="1.11" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#b13393"/>
<stop offset="1" stop-color="#149bd7"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0.089" y1="-0.051" x2="2.046" y2="2.011" xlink:href="#linear-gradient"/>
</defs>
<g id="Group_16" data-name="Group 16" transform="translate(-399 -372)">
<rect id="Rectangle_5" data-name="Rectangle 5" width="200" height="200" rx="10" transform="translate(399 372)" opacity="0.996" fill="url(#linear-gradient)"/>
<text id="Yes" transform="translate(454 496)" fill="#fff" font-size="57" font-family="Helvetica-Bold, Helvetica" font-weight="700"><tspan x="0" y="0">Yes</tspan></text>
</g>
<g id="Group_17" data-name="Group 17" transform="translate(-715 -129)">
<rect id="Rectangle_29" data-name="Rectangle 29" width="200" height="200" rx="10" transform="translate(715 372)" opacity="0.999" fill="url(#linear-gradient-2)"/>
<text id="No" transform="translate(778 496)" fill="#fff" font-size="57" font-family="Helvetica-Bold, Helvetica" font-weight="700"><tspan x="0" y="0">No</tspan></text>
</g>
</svg>Looking to hear from you.
Thanks,
Letitia