RotateX SVG字母

时间：2015-09-28 20:43:44

标签： jquery animation svg

我试图以SVG格式设置两个字母的动画...如果下面的代码段运行，则这两个字母是两个可见的蓝色字母：

＆＃13;
＆＃13; 
svg {
  width: 20%;
  margin: 10% 43% 0
}
＆＃13; 
<svg viewBox="0 0 890 153" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" id="logo">
							<path d="M2.7,110.3c-1.4,0-2.7,1.3-2.7,2.7c0,1.1,0.8,1.8,1.1,2c15.1,12.4,30.1,18,48.7,18c24.4,0,41.4-13.9,41.4-33.7
								c0-18.4-12.4-28.6-41.5-34.5C20,58.7,9.5,50.6,9.5,33.8c0-16,14.4-27.4,34.3-27.4c14.3,0,26.2,4.1,37.6,12.9c1.8,1.4,4.6,0.1,4.6-2
								c0-1-0.7-1.8-1.2-2.2C72.5,5.8,60.7,2,44.3,2C21.4,2,4.1,15.9,4.1,34.4c0,19.3,11.9,29.1,42.6,35.3c28.8,5.8,39,13.7,39,30.2
								c0,16.8-14.9,28.7-35.5,28.7c-18.4,0-32.1-5.3-45.8-17.7C4.2,110.7,3.5,110.3,2.7,110.3z" stroke="black" fill="rgb(0,0,0)" data-duration="100" class="letter" style="stroke-dasharray: 653, 655; stroke-dashoffset: 0; stroke-width: 0px; color: rgb(0, 0, 0);"/>					
							<path d="M130.9,3.9c-1.2,0-2.3,1.1-2.3,2.3c0,1.2,1.1,2.3,2.3,2.3h82.3v56.1h-73.8c-1.2,0-2.3,1.1-2.3,2.3c0,1.2,1.1,2.3,2.3,2.3
								h73.8v57.2H130c-1.2,0-2.3,1.1-2.3,2.3c0,1.2,1.1,2.3,2.3,2.3h85.9c1.4,0,2.7-1.3,2.7-2.7V6.6c0-1.4-1.3-2.7-2.7-2.7H130.9z" stroke="black" fill="rgb(98,129,195)" data-duration="100" class="letter letterE1" style="stroke-dasharray: 749, 751; stroke-dashoffset: 0; stroke-width: 0px; color: rgb(98, 129, 195);"/>
							<path d="M456.3,12.7 M377.6,3.9c-1.2,0-2.3,1.1-2.3,2.3c0,1.2,1,2.1,2.3,2.1h87.5l-90.5,117.8c-1,1.4-1.2,1.8-1.2,2.8
								c0,0.9,1.1,2.1,2.5,2.1h94.9c1.2,0,2.3-1.1,2.3-2.3c0-1.2-1-2.1-2.3-2.1h-90.7L470.6,8.8c1-1.4,1.2-1.8,1.2-2.8
								c0-0.9-1.2-2.1-2.5-2.1H377.6z" stroke="black" fill="rgb(0,0,0)" data-duration="100" class="letter" style="stroke-dasharray: 690, 692; stroke-dashoffset: 0; stroke-width: 0px; color: rgb(0, 0, 0);"/>						

							<path d="M256.3,126.8V69.6h73.8c1.2,0,2.3-1.1,2.3-2.3c0-1.2-1.1-2.3-2.3-2.3h-73.8V8.9h82.3c1.2,0,2.3-1.1,2.3-2.3
								c0-1.2-1.1-2.3-2.3-2.3h-85c-1.4,0-2.7,1.3-2.7,2.7v121.8c0,1.4,1.3,2.7,2.7,2.7h85.9c1.2,0,2.3-1.1,2.3-2.3c0-1.2-1.1-2.3-2.3-2.3
								H256.3z" stroke="black" fill="rgb(98,129,195)" data-duration="100" class="letter letterE2" style="stroke-dasharray: 750, 752; stroke-dashoffset: 0; stroke-width: 0px; color: rgb(98, 129, 195);"/>						

					</svg>
＆＃13;
＆＃13;
＆＃13;

上述代码的外部版本：http://codepen.io/sylvainusubelli/pen/XmNxQO

所需的效果是反转（镜像效果，使字母彼此面对），例如使用CSS3变换rotateX和3D透视，这在SVG上不起作用

有什么想法吗？

2 个答案:

答案 0 :(得分：1)

您可以使用属性转换，只需将其添加到第二个和第三个路径标记 更多信息here

答案 1 :(得分：0)

您可以使用CSS变换来执行动画。不幸的是，IE不支持SVG元素的CSS转换（但是？）。

另一种方法是使用SVG的原生SMIL动画（<animateTransform>元素等），但IE也不支持。虽然您可以使用FakeSmile库在IE中添加对它的支持。

剩下的选择是使用JS动画来调整两个字母的变换。你可以自己轻松地做到这一点，或者使用众多JS动画库中的一个。

＆＃13;
＆＃13; 
svg {
  width: 20%;
  margin: 10% 43% 0
}

svg .letterE1,
svg .letterE2 {
  transform-origin: 50% 50%;
  transform: scaleX(1);
  transition: transform 0.5s;
}

svg:hover .letterE1,
svg:hover .letterE2 {
  transform: scaleX(-1);
  transition: transform 0.5s;
}
＆＃13; 
<svg viewBox="0 0 890 153" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" id="logo">
	<path d="M2.7,110.3c-1.4,0-2.7,1.3-2.7,2.7c0,1.1,0.8,1.8,1.1,2c15.1,12.4,30.1,18,48.7,18c24.4,0,41.4-13.9,41.4-33.7
		c0-18.4-12.4-28.6-41.5-34.5C20,58.7,9.5,50.6,9.5,33.8c0-16,14.4-27.4,34.3-27.4c14.3,0,26.2,4.1,37.6,12.9c1.8,1.4,4.6,0.1,4.6-2
		c0-1-0.7-1.8-1.2-2.2C72.5,5.8,60.7,2,44.3,2C21.4,2,4.1,15.9,4.1,34.4c0,19.3,11.9,29.1,42.6,35.3c28.8,5.8,39,13.7,39,30.2
		c0,16.8-14.9,28.7-35.5,28.7c-18.4,0-32.1-5.3-45.8-17.7C4.2,110.7,3.5,110.3,2.7,110.3z" stroke="black" fill="rgb(0,0,0)" data-duration="100" class="letter" style="stroke-dasharray: 653, 655; stroke-dashoffset: 0; stroke-width: 0px; color: rgb(0, 0, 0);"/>					

    <path d="M130.9,3.9c-1.2,0-2.3,1.1-2.3,2.3c0,1.2,1.1,2.3,2.3,2.3h82.3v56.1h-73.8c-1.2,0-2.3,1.1-2.3,2.3c0,1.2,1.1,2.3,2.3,2.3
		h73.8v57.2H130c-1.2,0-2.3,1.1-2.3,2.3c0,1.2,1.1,2.3,2.3,2.3h85.9c1.4,0,2.7-1.3,2.7-2.7V6.6c0-1.4-1.3-2.7-2.7-2.7H130.9z" stroke="black" fill="rgb(98,129,195)" data-duration="100" class="letter letterE1" style="stroke-dasharray: 749, 751; stroke-dashoffset: 0; stroke-width: 0px; color: rgb(98, 129, 195);"/>
  
	<path d="M456.3,12.7 M377.6,3.9c-1.2,0-2.3,1.1-2.3,2.3c0,1.2,1,2.1,2.3,2.1h87.5l-90.5,117.8c-1,1.4-1.2,1.8-1.2,2.8
		c0,0.9,1.1,2.1,2.5,2.1h94.9c1.2,0,2.3-1.1,2.3-2.3c0-1.2-1-2.1-2.3-2.1h-90.7L470.6,8.8c1-1.4,1.2-1.8,1.2-2.8
		c0-0.9-1.2-2.1-2.5-2.1H377.6z" stroke="black" fill="rgb(0,0,0)" data-duration="100" class="letter" style="stroke-dasharray: 690, 692; stroke-dashoffset: 0; stroke-width: 0px; color: rgb(0, 0, 0);"/>						

	<path d="M256.3,126.8V69.6h73.8c1.2,0,2.3-1.1,2.3-2.3c0-1.2-1.1-2.3-2.3-2.3h-73.8V8.9h82.3c1.2,0,2.3-1.1,2.3-2.3
		c0-1.2-1.1-2.3-2.3-2.3h-85c-1.4,0-2.7,1.3-2.7,2.7v121.8c0,1.4,1.3,2.7,2.7,2.7h85.9c1.2,0,2.3-1.1,2.3-2.3c0-1.2-1.1-2.3-2.3-2.3
		H256.3z" stroke="black" fill="rgb(98,129,195)" data-duration="100" class="letter letterE2" style="stroke-dasharray: 750, 752; stroke-dashoffset: 0; stroke-width: 0px; color: rgb(98, 129, 195);"/>						
</svg>
＆＃13;
＆＃13;
＆＃13;

<强>更新

这是上面稍微复杂一点的版本，适用于Firefox。

＆＃13;
＆＃13; 
    svg {
      width: 20%;
      margin: 10% 43% 0
    }

    svg .letterE1,
    svg .letterE2 {
      transform: scaleX(1);
      transition: transform 0.5s;
    }

    svg:hover .letterE1,
    svg:hover .letterE2 {
      transform: scaleX(-1);
      transition: transform 0.5s;
    }
＆＃13; 
    <svg viewBox="0 0 890 153" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" id="logo">
    	<path d="M2.7,110.3c-1.4,0-2.7,1.3-2.7,2.7c0,1.1,0.8,1.8,1.1,2c15.1,12.4,30.1,18,48.7,18c24.4,0,41.4-13.9,41.4-33.7
    		c0-18.4-12.4-28.6-41.5-34.5C20,58.7,9.5,50.6,9.5,33.8c0-16,14.4-27.4,34.3-27.4c14.3,0,26.2,4.1,37.6,12.9c1.8,1.4,4.6,0.1,4.6-2
    		c0-1-0.7-1.8-1.2-2.2C72.5,5.8,60.7,2,44.3,2C21.4,2,4.1,15.9,4.1,34.4c0,19.3,11.9,29.1,42.6,35.3c28.8,5.8,39,13.7,39,30.2
    		c0,16.8-14.9,28.7-35.5,28.7c-18.4,0-32.1-5.3-45.8-17.7C4.2,110.7,3.5,110.3,2.7,110.3z" stroke="black" fill="rgb(0,0,0)" data-duration="100" class="letter" style="stroke-dasharray: 653, 655; stroke-dashoffset: 0; stroke-width: 0px; color: rgb(0, 0, 0);"/>					

        <g transform="translate(173.15 0)">
            <g class="letterE1">
        <path d="M130.9,3.9c-1.2,0-2.3,1.1-2.3,2.3c0,1.2,1.1,2.3,2.3,2.3h82.3v56.1h-73.8c-1.2,0-2.3,1.1-2.3,2.3c0,1.2,1.1,2.3,2.3,2.3
    		h73.8v57.2H130c-1.2,0-2.3,1.1-2.3,2.3c0,1.2,1.1,2.3,2.3,2.3h85.9c1.4,0,2.7-1.3,2.7-2.7V6.6c0-1.4-1.3-2.7-2.7-2.7H130.9z" stroke="black" fill="rgb(98,129,195)" data-duration="100" class="letter" style="stroke-dasharray: 749, 751; stroke-dashoffset: 0; stroke-width: 0px; color: rgb(98, 129, 195);"
              transform="translate(-173.15 0)"/>
            </g>
        </g>
      
    	<path d="M456.3,12.7 M377.6,3.9c-1.2,0-2.3,1.1-2.3,2.3c0,1.2,1,2.1,2.3,2.1h87.5l-90.5,117.8c-1,1.4-1.2,1.8-1.2,2.8
    		c0,0.9,1.1,2.1,2.5,2.1h94.9c1.2,0,2.3-1.1,2.3-2.3c0-1.2-1-2.1-2.3-2.1h-90.7L470.6,8.8c1-1.4,1.2-1.8,1.2-2.8
    		c0-0.9-1.2-2.1-2.5-2.1H377.6z" stroke="black" fill="rgb(0,0,0)" data-duration="100" class="letter" style="stroke-dasharray: 690, 692; stroke-dashoffset: 0; stroke-width: 0px; color: rgb(0, 0, 0);"/>						
    <g transform="translate(296.35 0)">
        <g class="letterE2">
    	<path id="foo" d="M256.3,126.8V69.6h73.8c1.2,0,2.3-1.1,2.3-2.3c0-1.2-1.1-2.3-2.3-2.3h-73.8V8.9h82.3c1.2,0,2.3-1.1,2.3-2.3
    		c0-1.2-1.1-2.3-2.3-2.3h-85c-1.4,0-2.7,1.3-2.7,2.7v121.8c0,1.4,1.3,2.7,2.7,2.7h85.9c1.2,0,2.3-1.1,2.3-2.3c0-1.2-1.1-2.3-2.3-2.3
    		H256.3z" stroke="black" fill="rgb(98,129,195)" data-duration="100" class="letter" style="stroke-dasharray: 750, 752; stroke-dashoffset: 0; stroke-width: 0px; color: rgb(98, 129, 195);"
              transform="translate(-296.35 0)"/>
        </g>
    </g>
</svg>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题