动画 SVG 内联

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（您在演示中使用它的方式似乎是随机的），修复箭头的对齐方式（组是比它们应该的宽 - 75px，实际上它们只有 65px，所以旋转关闭了大约 10px），并将渐变添加到背景

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