时间戳

首页 > 解决方案 > SVG gradient passes gradient color to the next SVG

html - SVG gradient passes gradient color to the next SVG

问题描述

I have an issue with SVG icons. The first SVG icon passes its color to the next one like that:

enter image description here

The second icon should have red gradient.

Here's a snippet example:

<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/>
    <path d="M31.7628 63.2679L59.7926 85.5881L98.3475 34.6986" stroke="white" stroke-width="18"/>
    <defs>
        <linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
            <stop stop-color="#26A212" stop-opacity="0.4"/>
            <stop offset="0.0001" stop-color="#26A212" stop-opacity="0.47"/>
            <stop offset="1" stop-color="#26A212"/>
        </linearGradient>
    </defs>
</svg>

<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/>
    <line x1="35.636" y1="92.636" x2="92.636" y2="35.636" stroke="white" stroke-width="18"/>
    <line x1="35.364" y1="35.636" x2="92.364" y2="92.636" stroke="white" stroke-width="18"/>
    <defs>
        <linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
            <stop stop-color="#26A212" stop-opacity="0.4"/>
            <stop offset="0.0001" stop-color="#B81818" stop-opacity="0.47"/>
            <stop offset="1" stop-color="#B81818"/>
        </linearGradient>
    </defs>
</svg>

When I remove the first icon, color of failure icon is red as expected:

enter image description here

Here's a snippet example:

<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/>
    <line x1="35.636" y1="92.636" x2="92.636" y2="35.636" stroke="white" stroke-width="18"/>
    <line x1="35.364" y1="35.636" x2="92.364" y2="92.636" stroke="white" stroke-width="18"/>
    <defs>
        <linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
            <stop stop-color="#26A212" stop-opacity="0.4"/>
            <stop offset="0.0001" stop-color="#B81818" stop-opacity="0.47"/>
            <stop offset="1" stop-color="#B81818"/>
        </linearGradient>
    </defs>
</svg>

I use https://figma.com for creating icons and I export these icons as SVG. Do you have any idea what's wrong with this?

标签： htmlsvgicons

解决方案

根据 Danny '365CSI' Engelman。当我们给每个元素这个唯一的 id 时，id 是相同的，这就是结果。谢谢丹尼，我也忽略了身份证。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

</style>
</head>
<body>

<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/>
    <path d="M31.7628 63.2679L59.7926 85.5881L98.3475 34.6986" stroke="white" stroke-width="18"/>
    <defs>
    
        <linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
            <stop stop-color="#26A212" stop-opacity="0.4"/>
            <stop offset="0.0001" stop-color="#26A212" stop-opacity="0.47"/>
            <stop offset="1" stop-color="#26A212"/>
        </linearGradient>
    </defs>
</svg>


<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="64" cy="64" r="64" fill="url(#paint01_linear)"/>
    <line x1="35.636" y1="92.636" x2="92.636" y2="35.636" stroke="white" stroke-width="18"/>
    <line x1="35.364" y1="35.636" x2="92.364" y2="92.636" stroke="white" stroke-width="18"/>
    <defs>
    
        <linearGradient id="paint01_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
            <stop stop-color="red" stop-opacity="0.4"/>
            <stop offset="0.0001" stop-color="red" stop-opacity="0.47"/>
            <stop offset="1" stop-color="red"/>
        </linearGradient>
    </defs>
</svg>

</body>
</html>

推荐阅读