在悬停时修改 SVG 路径答案

【问题标题】：Modify SVG path on hover在悬停时修改 SVG 路径
【发布时间】：2014-07-11 07:28:58
【问题描述】：

我想在悬停时更改 svg 路径坐标，我可以在不使用 D3js 的情况下这样做吗？

SVG 是我在 sketchapp 上制作的一种图表，代码如下：

    <svg class="light-graph" viewBox="0 0 1440 269">
        <g id="ANALYTICS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
            <g sketch:type="MSArtboardGroup" transform="translate(0.000000, -331.000000)" id="header" fill="#3797D1" opacity="0.323868937">
                <g sketch:type="MSLayerGroup">
                    <g id="bg-graph" sketch:type="MSShapeGroup">
                        <path d="M1123.39844,467.39269 L869.398438,569.515104 L720,331.388951 L559.398438,369.409092 L379.398437,587.524641 L123.398438,427.439835 L0,600 L1440,600 L1123.39844,467.39269 Z"></path>
                    </g>
                </g>
            </g>
        </g>
    </svg>

我想做的是图表在悬停时通过平滑过渡进行修改。该图将作为封面放置在标题上。

谢谢！

【问题讨论】：

标签： javascript jquery css svg

【解决方案1】：

你可以用 SMIL 来做到这一点，例如

<path d="M1123.39844,467.39269 L869.398438,569.515104 L720,331.388951 L559.398438,369.409092 L379.398437,587.524641 L123.398438,427.439835 L0,600 L1440,600 L1123.39844,467.39269 Z">
    <animate begin="mouseover" attributeName="d" to="M1123.39844,467.39269 L869.398438,69.515104 L720,331.388951 L559.398438,369.409092 L379.398437,587.524641 L123.398438,427.439835 L0,600 L1440,600 L1123.39844,467.39269 Z" dur="0.3s" fill="freeze" />
    <animate begin="mouseout" attributeName="d" to="M1123.39844,467.39269 L869.398438,569.515104 L720,331.388951 L559.398438,369.409092 L379.398437,587.524641 L123.398438,427.439835 L0,600 L1440,600 L1123.39844,467.39269 Z" dur="0.3s" fill="freeze" />
</path>

begin 属性是您要激活动画的事件，to 是路径的最终结果。

fill="freeze" 确保如果您将鼠标悬停在形状上，它会停留在动画位置。

这是我在 Firefox 中测试的一个完整的独立示例。

<svg xmlns="http://www.w3.org/2000/svg" class="light-graph" viewBox="0 0 1440 269">
    <g id="ANALYTICS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(0.000000, -331.000000)" id="header" fill="#3797D1" opacity="0.323868937">
            <g>
                <g id="bg-graph">
                    <path d="M1123.39844,467.39269 L869.398438,569.515104 L720,331.388951 L559.398438,369.409092 L379.398437,587.524641 L123.398438,427.439835 L0,600 L1440,600 L1123.39844,467.39269 Z">
                        <animate begin="mouseover" attributeName="d" to="M1123.39844,467.39269 L869.398438,69.515104 L720,331.388951 L559.398438,369.409092 L379.398437,587.524641 L123.398438,427.439835 L0,600 L1440,600 L1123.39844,467.39269 Z" dur="0.3s" fill="freeze" />
                        <animate begin="mouseout" attributeName="d" to="M1123.39844,467.39269 L869.398438,569.515104 L720,331.388951 L559.398438,369.409092 L379.398437,587.524641 L123.398438,427.439835 L0,600 L1440,600 L1123.39844,467.39269 Z" dur="0.3s" fill="freeze" />
                    </path>
                </g>
            </g>
        </g>
    </g>
</svg>

【讨论】：

在这里不起作用，悬停时没有任何反应，也许你可以给我看一个小提琴？我一定是做错了什么。
values 属性是否缺失？
谢谢罗伯特似乎在这里工作，但我的按钮应该在我的 svg 元素之上，但如果我执行 z-index -999 我的 svg 不再“可悬停”，如何我还能悬停我的 svg 元素并使我的链接保持可点击状态吗？
如果您在按钮上方，则不会将鼠标悬停在图表上。您可以让 SVG 忽略这些按钮，但随后您将无法单击这些按钮。这是另一个问题，您应该使用按钮这样提问。
SMIL 已弃用 developer.mozilla.org/en-US/docs/Web/SVG/… 最好使用 CSS“动画”