Question

我有这个设置与SVG很好地工作，但我很好奇，如果有人知道如何平滑过渡和/或在我有悬停动画之间添加动画。现在，在悬停时规模正在增加，如果我能以某种方式获得动画，这将是非常棒的。我想联机JS在某个地方会是最好/最灵活的，但我不确定如何正确地为SVG制作动画......

http://jsfiddle.net/468gm/

我想在这里内联是最好的，但我不确定是否可以使用内联SVG来平滑现有的比例效果，或者是否需要使用不同的方法来实现此悬停效果的动画版本

importedPaths.setAttribute("transform","translate("+transX+" "+transY+")scale("+scale+" "+scale+")")

Answer 1

在玩了一些代码之后我决定使用非js解决方案，因为你没有动态数量的箭头。 Check out the rough demo

我能够将CSS hover事件添加到元素中，方法是先将它们分别放在各自的组中（<g>），然后将transform应用到该组中。然后在hover上，transform: scaleY(1.3);和transition:all 0.5s使箭头生长。您还必须为我没想到的路径设置默认scale(1)，但这只是另外几行

/* CSS */
use:hover { 
    -webkit-transform:scaleY(1.3);
    transform:scaleY(1.3);
}
use {
    -webkit-transform:scaleY(1);
    transform:scaleY(1);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;    
    transition:all 0.5s;
}

/* SVG */
<svg id="mySVG" x="0" y="0" width="900" height="800" overflow="visible">
    <defs id="myDefs">
        <g id="myBlackArrow" fill="#0a8c9e" transform="translate(-421.37805790890565 -409.89077969361676)scale(0.1587493937731687 0.1587493937731687)" filter="url(#f2)" >
            <path d="M2553.826,1137.28l-2.772-1.719l29.799,1445.434l195.02,1.004l9.765-1448.729 c0,0-63.94,42.007-113.36,42.007S2553.826,1137.28,2553.826,1137.28z"></path>
            <path d="M2451.84,1058.265c0,0,171.983,75.005,216.505,75.005s188.535-75.005,188.535-75.005l-190.691-366.037 L2451.84,1058.265z"></path>
        </g>
        <g id="myGrayArrow" fill="#1c9eb0" transform="translate(-421.37805790890565 -409.89077969361676)scale(0.1587493937731687 0.1587493937731687)" filter="url(#f1)">
            <path d="M2553.826,1137.28l-2.772-1.719l29.799,1445.434l195.02,1.004l9.765-1448.729 c0,0-63.94,42.007-113.36,42.007S2553.826,1137.28,2553.826,1137.28z"></path>
            <path d="M2451.84,1058.265c0,0,171.983,75.005,216.505,75.005s188.535-75.005,188.535-75.005l-190.691-366.037 L2451.84,1058.265z"></path>
        </g>
        <g id="myWhiteArrow" fill="#47c9db" transform="translate(-421.37805790890565 -409.89077969361676)scale(0.1587493937731687 0.1587493937731687)">
            <path d="M2553.826,1137.28l-2.772-1.719l29.799,1445.434l195.02,1.004l9.765-1448.729 c0,0-63.94,42.007-113.36,42.007S2553.826,1137.28,2553.826,1137.28z"></path>
            <path d="M2451.84,1058.265c0,0,171.983,75.005,216.505,75.005s188.535-75.005,188.535-75.005l-190.691-366.037 L2451.84,1058.265z"></path>
        </g>
    </defs>
    <defs>
        <filter id="f1" x="0" y="0">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
        </filter>
    </defs>
    <defs>
        <filter id="f2" x="0" y="0">
            <feGaussianBlur in="SourceGraphic" stdDeviation="15"></feGaussianBlur>
        </filter>
    </defs>

    <g transform="translate(400 400) rotate(    0)"><use xlink:href="#myGrayArrow"></use></g>
    <g transform="translate(400 400) rotate( 22.5)"><use xlink:href="#myGrayArrow"></use></g>
    <g transform="translate(400 400) rotate(   45)"><use xlink:href="#myGrayArrow"></use></g>
    <!-- Found below -->
    <g transform="translate(400 400) rotate(   90)"><use xlink:href="#myGrayArrow"></use></g>
    <g transform="translate(400 400) rotate(112.5)"><use xlink:href="#myGrayArrow"></use></g>
    <g transform="translate(400 400) rotate(  135)"><use xlink:href="#myGrayArrow"></use></g>
    <g transform="translate(400 400) rotate(157.5)"><use xlink:href="#myGrayArrow"></use></g>
    <!-- Found below -->
    <g transform="translate(400 400) rotate(202.5)"><use xlink:href="#myGrayArrow"></use></g>
    <g transform="translate(400 400) rotate(  225)"><use xlink:href="#myGrayArrow"></use></g>
    <g transform="translate(400 400) rotate(247.5)"><use xlink:href="#myGrayArrow"></use></g>
    <g transform="translate(400 400) rotate(  270)"><use xlink:href="#myGrayArrow"></use></g>    
    <!-- Found below -->
    <g transform="translate(400 400) rotate(  315)"><use xlink:href="#myGrayArrow"></use></g>
    <g transform="translate(400 400) rotate(337.5)"><use xlink:href="#myGrayArrow"></use></g>


    <g transform="translate(400 400) rotate( 67.5)"><use xlink:href="#myWhiteArrow"></use></g>
    <g transform="translate(400 400) rotate(  180)"><use xlink:href="#myWhiteArrow"></use></g>
    <g transform="translate(400 400) rotate(292.5)"><use xlink:href="#myWhiteArrow"></use></g>
</svg>

你要做的唯一事情就是确定哪些箭头应该#myBlackArrow而不是#myGrayArrow（你在演示中的方式似乎是随机的），修复箭头的对齐方式（这些组比它们应该更宽 - 当它们实际上只有65像素时为75像素，因此旋转偏差约为10像素），并将渐变添加到背景中

如果您希望定位特定类型以便为每个类型分别设置单独的悬停事件，则可以添加data-属性并使用CSS选择它。我决定使用data-aColor来保持它的独特性，因为它是箭头颜色。然后，您可以使用以下内容选择CSS的数据属性：[data-aColor="gray"] { ... Here's a demo我的意思

动画SVG内联

1 个答案: