Question

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

现在我的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属性。现在我只能使用过渡属性将rect的宽度从原始大小更改为另一个。

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

感谢。

＆＃13;

#rect3680:hover {
    fill: tomato;
    width: 300px;
    transition: width .3s ease-in-out;
}

＆＃13;

<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>

＆＃13;

鼠标悬停时重绘svg rect

0 个答案: