如何从 svg 边框内的 svg 创建悬停效果答案

【问题标题】：How to create a hover effect from an svg inside a svg border如何从 svg 边框内的 svg 创建悬停效果
【发布时间】：2021-11-17 02:37:49
【问题描述】：

我目前在 illustrator 中创建了一个边框，并使用 illustrator 导入了一个同样是 SVG 的图表以放置在 SVG 边框内。所以，我想从我创建的图表中实际创建悬停效果。当我刚刚拥有 svg 图表时，我设法让悬停效果工作，但由于我添加了边框，所以悬停效果不起作用。我知道边框挡住了效果。我想在css中实现这一点。下面是我没有添加边框时工作的 CSS 代码。下面是带有边框和图表的html代码，我将SVG代码放入下面的html中。

这个小片段是我想要悬停效果的地方：所以，我把它放在这里，因为它有很多 html 代码需要查看。但是，您会在中间看到它。

<a class="scaling-svg-color" href="#">
              <path d="M159.5,95.42a6,6,0,0,1,6-6H300.16a6,6,0,0,1,6,6V230.09a6,6,0,0,1-6,6H165.5a6,6,0,0,1-6-6Z"
              style="fill:#fff;stroke:#5e5e5e" />
</a>

---html代码-----

<div id="wrapperSVG_Agile" class="scaling-svg-container y">
    <svg class="svgTreeAgile" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 459.73 295.39">
        <polygon points="0 0 0 39.66 459.73 38.8 459.36 0.18 0 0" style="fill:#00269a" />
        <polyline points="459.73 36.68 0.22 39.34 0 282.87 459.58 283.42" style="fill:#c5cfe8" />
        <g id="Big_Text_Top" data-name="Big Text Top">
            <path
                d="M40.8,14........."
                style="fill:#fff" />
        </g>
        <rect id="bottom_border" data-name="bottom border" y="283.42" width="459.47" height="11.97"
            style="fill:#00269a" />
        <g id="Decision_Tree" data-name="Decision Tree">
            <rect x="3.15" y="4.09" width="35.8" height="30.32" style="fill:#00269a" />
            <polygon points="8.92 17.28 7.78 16.12 12.91 11.85 14.05 13.01 8.92 17.28" style="fill:#fff" />
            <polygon points="16.88 23.15 15.74 21.98 20.87 17.71 22.01 18.87 16.88 23.15" style="fill:#fff" />
            <polygon points="24.7 16.95 23.56 15.78 28.69 11.51 29.83 12.67 24.7 16.95" style="fill:#fff" />
            <polygon points="13.85 21.92 12.74 23.11 7.49 18.97 8.59 17.78 13.85 21.92" style="fill:#fff" />
            <polygon points="21.94 28.06 20.83 29.25 15.58 25.11 16.68 23.91 21.94 28.06" style="fill:#fff" />
            <polygon points="29.87 22.02 28.77 23.21 23.51 19.07 24.62 17.88 29.87 22.02" style="fill:#fff" />
            <ellipse cx="14.8" cy="11.2" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="6.87" cy="17.48" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="22.75" cy="17.48" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="14.8" cy="23.56" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="22.75" cy="29.75" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="30.68" cy="23.56" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="30.68" cy="11.2" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="14.81" cy="11.35" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="6.87" cy="17.43" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="22.75" cy="17.43" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="14.81" cy="23.56" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="22.75" cy="29.86" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="30.68" cy="23.56" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="30.68" cy="11.35" rx="1.47" ry="1.35" style="fill:#00269a" />
        </g>
        <g id="Text_on_Tree" data-name="Text on Tree">
            <path d="M103.43,162.76a45.3,45.3,0,1,1-45.3-45.3A45.3,45.3,0,0,1,103.43,162.76Z"
                style="fill:#fff;stroke:#5e5e5e" />
            <g id="a">
                <path id="d" d="M36.51,155.24V160h7.84v2.47H36.51v5.62H33.3V152.77H44.59v2.47H36.51"
                    style="fill:#333" />
                <path id="e"
                    d="M53.54,166c-1,1.17-1.85,2.41-3.95,2.35-2.28-.06-3.58-1.24-3.58-3.58-.06-3.71,3.4-3.89,7.16-3.77.07-1.6-.18-2.9-1.73-2.9a1.6,1.6,0,0,0-1.72,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.06,5.06c-.06.87.74,1.12,1.54.93V168C56,168.45,53.42,168.27,53.54,166Zm-3,.19c1.79,0,2.66-1.48,2.59-3.52-2,0-4.07-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="e-2" data-name="e"
                    d="M65.89,166c-1,1.17-1.85,2.41-4,2.35-2.29-.06-3.58-1.24-3.58-3.58-.06-3.71,3.39-3.89,7.16-3.77.06-1.6-.19-2.9-1.73-2.9a1.61,1.61,0,0,0-1.73,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.07,5.06c-.07.87.74,1.12,1.54.93V168C68.3,168.45,65.77,168.27,65.89,166Zm-3,.19c1.79,0,2.65-1.48,2.59-3.52-2,0-4.08-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="f"
                    d="M80.46,156.85c-.06-2.66-5.81-2.84-6-.19,1.11,4.08,9.32.62,9.51,7,.18,5.86-10.19,5.74-12.6,2.22a4.56,4.56,0,0,1-.74-1.85l3.09-.5c.18,2.84,6.91,3.46,7.16.31-1-4.26-9.26-.61-9.51-7-.24-5.37,9.45-5.44,11.61-2.16a5.34,5.34,0,0,1,.62,1.72"
                    style="fill:#333" />
            </g>
            <a class="scaling-svg-color" href="#">
            <path d="M159.5,95.42a6,6,0,0,1,6-6H300.16a6,6,0,0,1,6,6V230.09a6,6,0,0,1-6,6H165.5a6,6,0,0,1-6-6Z"
                style="fill:#fff;stroke:#5e5e5e" /></a>
            <path d="M104.43,162.76h38.18" style="fill:none;stroke:#5e5e5e" />
            <path d="M104.45,163.26h-.54l0-.5v-.5h.52Z" style="fill:#5e5e5e" />
            <path d="M157.38,162.76l-14.27,4.64v-9.27Z" style="fill:#5e5e5e;stroke:#5e5e5e" />
            <path d="M443.43,162.76a45.3,45.3,0,1,1-45.3-45.3A45.3,45.3,0,0,1,443.43,162.76Z"
                style="fill:#fff;stroke:#5e5e5e" />
            <g id="a-2" data-name="a">
                <path id="d-2" data-name="d" d="M376.51,155.24V160h7.84v2.47h-7.84v5.62H373.3V152.77h11.29v2.47h-8.08"
                    style="fill:#333" />
                <path id="e-3" data-name="e"
                    d="M393.54,166c-1,1.17-1.85,2.41-4,2.35-2.28-.06-3.58-1.24-3.58-3.58-.06-3.71,3.4-3.89,7.16-3.77.07-1.6-.18-2.9-1.73-2.9a1.6,1.6,0,0,0-1.72,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.06,5.06c-.06.87.74,1.12,1.54.93V168C396,168.45,393.42,168.27,393.54,166Zm-3,.19c1.79,0,2.66-1.48,2.59-3.52-2,0-4.07-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="e-4" data-name="e"
                    d="M405.89,166c-1,1.17-1.85,2.41-3.95,2.35-2.29-.06-3.58-1.24-3.58-3.58-.06-3.71,3.39-3.89,7.16-3.77.06-1.6-.19-2.9-1.73-2.9a1.61,1.61,0,0,0-1.73,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.07,5.06c-.07.87.74,1.12,1.54.93V168C408.3,168.45,405.77,168.27,405.89,166Zm-3,.19c1.79,0,2.65-1.48,2.59-3.52-2,0-4.08-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="f-2" data-name="f"
                    d="M420.46,156.85c-.06-2.66-5.81-2.84-6-.19,1.11,4.08,9.32.62,9.51,7,.18,5.86-10.19,5.74-12.6,2.22a4.56,4.56,0,0,1-.74-1.85l3.09-.5c.18,2.84,6.91,3.46,7.16.31-1.05-4.26-9.26-.61-9.51-7-.24-5.37,9.45-5.44,11.61-2.16a5.34,5.34,0,0,1,.62,1.72"
                    style="fill:#333" />
            </g>
            <path d="M307.16,162.76H336" style="fill:none;stroke:#5e5e5e" />
            <path d="M307.18,163.26h-.52v-1h.52Z" style="fill:#5e5e5e" />
            <path d="M350.71,162.76l-14.26,4.64v-9.27Z" style="fill:#5e5e5e;stroke:#5e5e5e" />
            <path d="M175.13,197.85a6,6,0,0,1,6-6h103.4a6,6,0,0,1,6,6v17.28a6,6,0,0,1-6,6H181.13a6,6,0,0,1-6-6Z"
                style="fill:#fff;stroke:#5e5e5e" />
            <g id="b">
                <path id="g"
                    d="M218.75,209.82c.61,5.43-7.72,6.72-9.88,2.65a5.83,5.83,0,0,1-.68-2l3.21-.49c.25,1.3.74,2.29,2.16,2.35s2-1,2-2.47v-8h-3v-2.53h6.24v10.5"
                    style="fill:#333" />
                <path id="h" d="M221.71,214.63V199.32h3.21v15.31h-3.21" style="fill:#333" />
                <path id="i"
                    d="M241.22,203.89a4.19,4.19,0,0,1-3.34,4.32l4.14,6.42h-3.64l-3.52-5.8h-3.77v5.8h-3.21V199.32C233.62,199.57,241.28,197.9,241.22,203.89Zm-10.13,2.47c3-.12,6.92.74,6.92-2.35s-4.08-2-6.92-2.16v4.51"
                    style="fill:#333" />
                <path id="j"
                    d="M254.67,214.63l-1.35-3.89h-5.81l-1.36,3.89h-3.21l5.56-15.31h3.77l5.55,15.31Zm-2-6.3-2.23-6.66c-.61,2.34-1.48,4.44-2.22,6.66h4.45"
                    style="fill:#333" />
            </g>
            <path d="M192.83,101.29H273.3v80.47H192.83Z" style="fill:none;stroke:#000;stroke-opacity:0" />
            <rect x="189.64" y="96.24" width="89.82" height="89.82" rx="44.73"
                style="stroke:#000;stroke-miterlimit:10" />
            <polygon points="235.05 111.44 201.53 141.07 235.62 170.86 270.02 141.15 235.05 111.44"
                style="fill:#fdfeff" />
            <polygon points="223.11 140.44 234.55 150.31 246.35 140.44 234.73 131.4 223.11 140.44" />
        </g>
    </svg>
</div>

---悬停效果的css代码----

a.scaling-svg-color:hover path {
    fill: #d6b1d0;
    border: 1px solid #94a0b4;
}

【问题讨论】：

不能覆盖路径的内联样式。您可以像这样将这些边框放在 css 中：a.scaling-svg-color path {... 和 a.scaling-svg-color:hover path { 另外，`border: 1px solid #94a0b4;` 不是 svg 元素的有效 css 规则。请改用stroke 和stroke-width

标签： html css svg hover adobe-illustrator

【解决方案1】：

您的悬停规则不起作用有几个原因：

元素上style 属性中的规则会覆盖应用于该元素的CSS 规则。所以style="fill:#fff;stroke:#5e5e5e" 不会被a.scaling-svg-color:hover path { fill: #d6b1d0; } 规则覆盖。
border 不起作用，因为它不是 SVG 元素的有效样式属性。也许你的意思是stroke 这里？

要强制 CSS 规则优先，您有几个选择。一种方法是添加!important 标志，就像我在下面的示例中所做的那样。但是，作为一般建议，不鼓励使用此标志。因为它与继承相混淆。

另外，每当您从 Illustrator 导出 SVG 并打算嵌入网页并使用 CSS 进行样式设置时，我的建议是确保更改导出选项“CSS 属性”。将其设置为 not 生成 style 属性，就像这个 SVG 一样。如果您没有使用 style="" 属性，那么您的 CSS 规则就会起作用。

a.scaling-svg-color:hover path {
    fill: #d6b1d0 !important;
}

<div id="wrapperSVG_Agile" class="scaling-svg-container y">
    <svg class="svgTreeAgile" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 459.73 295.39">
        <polygon points="0 0 0 39.66 459.73 38.8 459.36 0.18 0 0" style="fill:#00269a" />
        <polyline points="459.73 36.68 0.22 39.34 0 282.87 459.58 283.42" style="fill:#c5cfe8" />
        <g id="Big_Text_Top" data-name="Big Text Top">
            <path
                d="M40.8,14........."
                style="fill:#fff" />
        </g>
        <rect id="bottom_border" data-name="bottom border" y="283.42" width="459.47" height="11.97"
            style="fill:#00269a" />
        <g id="Decision_Tree" data-name="Decision Tree">
            <rect x="3.15" y="4.09" width="35.8" height="30.32" style="fill:#00269a" />
            <polygon points="8.92 17.28 7.78 16.12 12.91 11.85 14.05 13.01 8.92 17.28" style="fill:#fff" />
            <polygon points="16.88 23.15 15.74 21.98 20.87 17.71 22.01 18.87 16.88 23.15" style="fill:#fff" />
            <polygon points="24.7 16.95 23.56 15.78 28.69 11.51 29.83 12.67 24.7 16.95" style="fill:#fff" />
            <polygon points="13.85 21.92 12.74 23.11 7.49 18.97 8.59 17.78 13.85 21.92" style="fill:#fff" />
            <polygon points="21.94 28.06 20.83 29.25 15.58 25.11 16.68 23.91 21.94 28.06" style="fill:#fff" />
            <polygon points="29.87 22.02 28.77 23.21 23.51 19.07 24.62 17.88 29.87 22.02" style="fill:#fff" />
            <ellipse cx="14.8" cy="11.2" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="6.87" cy="17.48" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="22.75" cy="17.48" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="14.8" cy="23.56" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="22.75" cy="29.75" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="30.68" cy="23.56" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="30.68" cy="11.2" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="14.81" cy="11.35" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="6.87" cy="17.43" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="22.75" cy="17.43" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="14.81" cy="23.56" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="22.75" cy="29.86" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="30.68" cy="23.56" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="30.68" cy="11.35" rx="1.47" ry="1.35" style="fill:#00269a" />
        </g>
        <g id="Text_on_Tree" data-name="Text on Tree">
            <path d="M103.43,162.76a45.3,45.3,0,1,1-45.3-45.3A45.3,45.3,0,0,1,103.43,162.76Z"
                style="fill:#fff;stroke:#5e5e5e" />
            <g id="a">
                <path id="d" d="M36.51,155.24V160h7.84v2.47H36.51v5.62H33.3V152.77H44.59v2.47H36.51"
                    style="fill:#333" />
                <path id="e"
                    d="M53.54,166c-1,1.17-1.85,2.41-3.95,2.35-2.28-.06-3.58-1.24-3.58-3.58-.06-3.71,3.4-3.89,7.16-3.77.07-1.6-.18-2.9-1.73-2.9a1.6,1.6,0,0,0-1.72,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.06,5.06c-.06.87.74,1.12,1.54.93V168C56,168.45,53.42,168.27,53.54,166Zm-3,.19c1.79,0,2.66-1.48,2.59-3.52-2,0-4.07-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="e-2" data-name="e"
                    d="M65.89,166c-1,1.17-1.85,2.41-4,2.35-2.29-.06-3.58-1.24-3.58-3.58-.06-3.71,3.39-3.89,7.16-3.77.06-1.6-.19-2.9-1.73-2.9a1.61,1.61,0,0,0-1.73,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.07,5.06c-.07.87.74,1.12,1.54.93V168C68.3,168.45,65.77,168.27,65.89,166Zm-3,.19c1.79,0,2.65-1.48,2.59-3.52-2,0-4.08-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="f"
                    d="M80.46,156.85c-.06-2.66-5.81-2.84-6-.19,1.11,4.08,9.32.62,9.51,7,.18,5.86-10.19,5.74-12.6,2.22a4.56,4.56,0,0,1-.74-1.85l3.09-.5c.18,2.84,6.91,3.46,7.16.31-1-4.26-9.26-.61-9.51-7-.24-5.37,9.45-5.44,11.61-2.16a5.34,5.34,0,0,1,.62,1.72"
                    style="fill:#333" />
            </g>

            <a class="scaling-svg-color" href="#">
            <path d="M159.5,95.42a6,6,0,0,1,6-6H300.16a6,6,0,0,1,6,6V230.09a6,6,0,0,1-6,6H165.5a6,6,0,0,1-6-6Z"
                style="fill:#fff;stroke:#5e5e5e" /></a>

            <path d="M104.43,162.76h38.18" style="fill:none;stroke:#5e5e5e" />
            <path d="M104.45,163.26h-.54l0-.5v-.5h.52Z" style="fill:#5e5e5e" />
            <path d="M157.38,162.76l-14.27,4.64v-9.27Z" style="fill:#5e5e5e;stroke:#5e5e5e" />
            <path d="M443.43,162.76a45.3,45.3,0,1,1-45.3-45.3A45.3,45.3,0,0,1,443.43,162.76Z"
                style="fill:#fff;stroke:#5e5e5e" />
            <g id="a-2" data-name="a">
                <path id="d-2" data-name="d" d="M376.51,155.24V160h7.84v2.47h-7.84v5.62H373.3V152.77h11.29v2.47h-8.08"
                    style="fill:#333" />
                <path id="e-3" data-name="e"
                    d="M393.54,166c-1,1.17-1.85,2.41-4,2.35-2.28-.06-3.58-1.24-3.58-3.58-.06-3.71,3.4-3.89,7.16-3.77.07-1.6-.18-2.9-1.73-2.9a1.6,1.6,0,0,0-1.72,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.06,5.06c-.06.87.74,1.12,1.54.93V168C396,168.45,393.42,168.27,393.54,166Zm-3,.19c1.79,0,2.66-1.48,2.59-3.52-2,0-4.07-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="e-4" data-name="e"
                    d="M405.89,166c-1,1.17-1.85,2.41-3.95,2.35-2.29-.06-3.58-1.24-3.58-3.58-.06-3.71,3.39-3.89,7.16-3.77.06-1.6-.19-2.9-1.73-2.9a1.61,1.61,0,0,0-1.73,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.07,5.06c-.07.87.74,1.12,1.54.93V168C408.3,168.45,405.77,168.27,405.89,166Zm-3,.19c1.79,0,2.65-1.48,2.59-3.52-2,0-4.08-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="f-2" data-name="f"
                    d="M420.46,156.85c-.06-2.66-5.81-2.84-6-.19,1.11,4.08,9.32.62,9.51,7,.18,5.86-10.19,5.74-12.6,2.22a4.56,4.56,0,0,1-.74-1.85l3.09-.5c.18,2.84,6.91,3.46,7.16.31-1.05-4.26-9.26-.61-9.51-7-.24-5.37,9.45-5.44,11.61-2.16a5.34,5.34,0,0,1,.62,1.72"
                    style="fill:#333" />
            </g>
            <path d="M307.16,162.76H336" style="fill:none;stroke:#5e5e5e" />
            <path d="M307.18,163.26h-.52v-1h.52Z" style="fill:#5e5e5e" />
            <path d="M350.71,162.76l-14.26,4.64v-9.27Z" style="fill:#5e5e5e;stroke:#5e5e5e" />
            <path d="M175.13,197.85a6,6,0,0,1,6-6h103.4a6,6,0,0,1,6,6v17.28a6,6,0,0,1-6,6H181.13a6,6,0,0,1-6-6Z"
                style="fill:#fff;stroke:#5e5e5e" />
            <g id="b">
                <path id="g"
                    d="M218.75,209.82c.61,5.43-7.72,6.72-9.88,2.65a5.83,5.83,0,0,1-.68-2l3.21-.49c.25,1.3.74,2.29,2.16,2.35s2-1,2-2.47v-8h-3v-2.53h6.24v10.5"
                    style="fill:#333" />
                <path id="h" d="M221.71,214.63V199.32h3.21v15.31h-3.21" style="fill:#333" />
                <path id="i"
                    d="M241.22,203.89a4.19,4.19,0,0,1-3.34,4.32l4.14,6.42h-3.64l-3.52-5.8h-3.77v5.8h-3.21V199.32C233.62,199.57,241.28,197.9,241.22,203.89Zm-10.13,2.47c3-.12,6.92.74,6.92-2.35s-4.08-2-6.92-2.16v4.51"
                    style="fill:#333" />
                <path id="j"
                    d="M254.67,214.63l-1.35-3.89h-5.81l-1.36,3.89h-3.21l5.56-15.31h3.77l5.55,15.31Zm-2-6.3-2.23-6.66c-.61,2.34-1.48,4.44-2.22,6.66h4.45"
                    style="fill:#333" />
            </g>
            <path d="M192.83,101.29H273.3v80.47H192.83Z" style="fill:none;stroke:#000;stroke-opacity:0" />
            <rect x="189.64" y="96.24" width="89.82" height="89.82" rx="44.73"
                style="stroke:#000;stroke-miterlimit:10" />
            <polygon points="235.05 111.44 201.53 141.07 235.62 170.86 270.02 141.15 235.05 111.44"
                style="fill:#fdfeff" />
            <polygon points="223.11 140.44 234.55 150.31 246.35 140.44 234.73 131.4 223.11 140.44" />
        </g>
    </svg>
</div>

【讨论】：

感谢您的反馈。 :) 我会试一试。 :)

【解决方案2】：

当使用 svgs 制作悬停效果时，我的方法是制作两张图像，一张有悬停效果，一张没有。悬停时，交换图像。

查看文件：

<div class="column small-12 download-link">
  <img data-src="url-regular" class="package-download-icon">
  <img data-src="url-hover" class="package-download-icon-hover">
</div>

SCSS 文件：

.package-download-icon, .package-download-icon-hover {
    float: left;
    vertical-align: top;
    margin-top: 2px;
    margin-right: 8px;
    margin-bottom: 12px;
}
.package-download-icon-hover {
    display: none;
  }
  .download-link:hover {
    p.package-download {
      font-weight: 700;
      color: #006a7d;
    }
    .package-download-icon {
      display: none;
    }
    .package-download-icon-hover {
      display: inline;
    }
  }
}

【讨论】：

谢谢，我没有这样想。感谢您的回复。我会试试看。 @Genevieve McAllister