悬停时修改SVG路径 [英] Modify SVG path on hover
问题描述
我想在悬停时更改svg路径坐标,是否可以在不使用D3js的情况下做到这一点?
I would like to change a svg path coordinates on hover, can I do that without using D3js ?
SVG是我在sketchapp上制作的一种图形,这是代码:
The SVG is a sort of graph I made on sketchapp, here's the code :
<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>
我想做的是,图形会随着鼠标悬停时的平滑过渡而进行修改.该图将作为封面放置在标题上.
What I would like to do is that the graph modifies with a smooth transition on hover. The graph would be placed on a header as a cover.
谢谢!
推荐答案
您可以使用SMIL例如
You could do it with SMIL e.g.
<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则是路径最终要变成的样子.
The begin attribute is the event you want to activate the animation on and the to is what the path will end up as.
fill ="freeze"可确保如果将鼠标悬停在该形状上,它将保持在动画位置.
fill="freeze" ensures that if you keep the mouse over the shape it stays in the animated position.
这是我在Firefox中测试的完整独立示例.
This is a complete standalone example that I tested in 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>
这篇关于悬停时修改SVG路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!