问在悬停时修改SVG路径
EN

Stack Overflow用户

提问于 2014-07-10 23:28:58

回答 1查看 1.5K关注 0票数 1

我想在悬停时更改svg路径坐标，我可以不使用D3js吗？

SVG是我在草图上创建的一种图形，下面是代码：

    <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

云联络中心6.1折起

灵活稳定的一体化云联络中心，助力快速搭建集电话、在线交流、音视频通话为一体的客户联络平台

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-07-11 00:18:59

你可以用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=“冻结”确保如果你保持鼠标在形状上，它将保持在动画的位置。

这是我在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>