0

我想在鼠标悬停时重绘我的矩形。

现在我的 html 中有这个：

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="100px" height="100px" viewBox="0 0 210 297" version="1.1"
    id="svg8" inkscape:version="0.92.0 r15299" sodipodi:docname="dessin.svg">
    <rect id="rect3680" width="128.5119" height="21.922617" x="38.55357" y="75.505951" style="stroke-width:0.26458332" />
    <rect id="rect3684" width="91.470238" height="23.434523" x="40.065475" y="117.08333" style="stroke-width:0.26458332" />
    <rect id="rect3686" width="127" height="24.190477" x="40.065475" y="160.17262" style="stroke-width:0.26458332;" />
</svg>

我想充其量只使用css属性来做到这一点。现在我只能使用转换属性将矩形的宽度从其原始大小更改为另一个。

我尝试使用 vivus 库，但没有用。

谢谢。

#rect3680:hover {
    fill: tomato;
    width: 300px;
    transition: width .3s ease-in-out;
}
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="100px" height="100px" viewBox="0 0 210 297" version="1.1"
        id="svg8" inkscape:version="0.92.0 r15299" sodipodi:docname="dessin.svg">
        <rect id="rect3680" width="128.5119" height="21.922617" x="38.55357" y="75.505951" style="stroke-width:0.26458332" />
        <rect id="rect3684" width="91.470238" height="23.434523" x="40.065475" y="117.08333" style="stroke-width:0.26458332" />
        <rect id="rect3686" width="127" height="24.190477" x="40.065475" y="160.17262" style="stroke-width:0.26458332;" />
    </svg>

4

0 回答 0