0

灰色の四角形にマウスオーバーすると、彼をスケーリングします

<defs>
<g id="rectangl">
    <rect x="-0.5" y="-0.5" width="1" height="1" fill="grey" stroke-width="0.0" />

    <animateTransform attributeName="transform" attributeType="XML"
    type="scale" from="1" to="1.15" repeatCount="1" begin="mouseover" dur = "0.2s"
    fill="freeze"/>
</g>

私はこのようないくつかの数字を追加しようとしています:

<defs>
<g id="rectangl">
    <rect x="-0.5" y="-0.5" width="1" height="1" fill="grey" stroke-width="0.0" />
    **<line x1="-0.5" y1="-0.5" x2="-0.5" y2="0.5" stroke-width="0.05"  stroke-linecap="round"/>
    <circle cx="0.5" cy="0.0" r="0.05" stroke-width="0"  /><!-- dot -->
    <circle cx="-0.5" cy="0.0" r="0.05" fill="white" stroke-width="0.01" />**

    <animateTransform attributeName="transform" attributeType="XML"
    type="scale" from="1" to="1.15" repeatCount="1" begin="mouseover" dur = "0.2s"
    fill="freeze"/>
</g>

その後、この図形 (線、円、四角形) のいずれかの上にマウスを置き、灰色の四角形にとどまっている間に再びアニメーションを開始します。

図全体 (id="rectangl") にマウスを置いている間は拡大 (+15%) し、図全体からマウスを離したときだけ縮小 (-15%) する必要があります。

私の同様のテーマSVG animateTransform を使用して、ホバーのような効果を慎重にスケーリングします

理解していただきありがとうございます

HTML で開くテキスト:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <svg version="1.1" xmlns:x="&amp;ns_extend;" xmlns:i="&amp;ns_ai;" xmlns:graph="&amp;ns_graphs;"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:a="http://ns.adobe.com/adobesvgviewerextensions/3.0/" 
    x="0px" y="0px" width="800" height="600" viewBox="-400 -300 800 600" xml:space="preserve" font-family="arial" font-size="14">
        <defs>
            <g id="dscn.n" cursor="pointer">
                <g id="rectangl">
                    <rect x="-0.5" y="-0.5" width="1" height="1" fill="grey" stroke-width="0.0" />
                    <line x1="-0.5" y1="-0.5" x2="-0.5" y2="0.5" stroke-width="0.05"  stroke-linecap="round"/><!-- left vertical -->
                    <circle cx="0.5" cy="0.0" r="0.05" stroke-width="0"  /><!-- dot -->
                    <circle cx="-0.5" cy="0.0" r="0.05" fill="white" stroke-width="0.01" />

                    <line x1="0.5" y1="0" x2="-0.15" y2="-0.5" stroke-width="0.05" stroke-linecap="round" /><!-- off -->

                    <animateTransform attributeName="transform" attributeType="XML"
                    type="scale" from="1" to="1.15" repeatCount="1" begin="mouseover" dur = "0.2s"
                    fill="freeze"/>
                </g>
            </g>
        </defs>
        <g transform="translate(-200,-200)" >
            <title>dscn.n</title>
            <g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
                <use xlink:href="#dscn.n" />
            </g>
        </g>
    </svg>
</body>

4

1 に答える 1

1

line 要素と circle 要素に pointer-events="none" を追加します。

于 2014-08-04T13:48:22.780 に答える