调整SVG动画大小，同时保持其在其容器中居中 [英] Resizing SVG animation while keeping it centered in its container

问题描述

我试图将< path> 动画水平和垂直居中（用 transform =scale ）），同时将< svg> 设置为其容器的宽度和高度的100％，我使用 Snap.svg 。

如下图所示， ; svg> 很好，但< path> 全部挤在左上角。

  var s = Snap（＃me）; var myPath = s.select（＃mypath）; function reset（el）{el.stop attr（{stroke-dashoffset：125}）;}; function startAnim（el）{el.animate（{stroke-dashoffset：600}，1000）;}; reset（myPath）; s.mouseover （）{;};;};;}};} css lang-css prettyprint-override>  .test {border：1px solid black; height：500px; width：500px;}＃me {border：2px solid green;}＃mypath {border：2px solid blue;显示：flex; justify-content：center; align-content：center; flex-direction：column;}  

 < script src = http://tedbeer.net/lib/snap.svg-min.js\"> ;</script> ;<script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1。 1 / jquery.min.js>< / script>< div class =test> < div class =pie> < svg id =meviewBox =0 0 350 350> <！ - < svg id =meviewBox =0 0 350 350width =100height =100> < path id =mypathd =M 175,175 m 0，-75 a 75，75 0 1，0 0，150 a 75，75 0 1，0 0，-150fill = =＃cccstroke-width =150stroke-dasharray =0 600 600 0stroke-dashoffset =1000transform =scale（0.5）> < / path> < / svg> < / div>< / div>  

解决方案

如果你想通过Snap修改转换，你会做的稍有不同。

最终结果可能与浏览器相同mefs解决方案，因为它将最终在元素本身上有一个类似的矩阵，它真的是最方便的。

您可以指定缩放的中心点，只是在缩放x& y参数。

  myPath.transform（'s0.5,0.5,175,175'）; 
  

jsfiddle

编辑：实际上我是一个白痴，它更简单。我只是记得，如果没有指定，Snap会自动使用变换字符串上的对象的中心。因此，事实上你可以减少到这个..

  myPath.transform（'s0.5'）; 
  

jsfiddle

I'm trying to center the <path> animation horizontally and vertically (after having scaled it down with transform="scale(0.5)) while keeping the <svg> at 100% width and height of its container. I'm using Snap.svg.

As you can see below, the <svg> is fine but the <path> is all crammed up in the upper left corner.

var s = Snap("#me");


var myPath = s.select("#mypath");

function reset( el ) {
    el.stop();
    el.attr({ "stroke-dashoffset": 125 });
};

function startAnim( el ) {
    el.animate( { "stroke-dashoffset": 600 }, 1000 );
};

reset( myPath );

s.mouseover( function() {
  startAnim( myPath );
} );

s.mouseout( function() {
  reset( myPath );
} );

.test {
    border: 1px solid black;
    height: 500px;
    width: 500px;
}
#me { 
  border: 2px solid green;
}
#mypath { 
  border: 2px solid blue;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

<script src="http://tedbeer.net/lib/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
    <div class="pie">
        <svg id="me" viewBox="0 0 350 350">
        <!--<svg id="me" viewBox="0 0 350 350" width="100" height="100">-->
            <path id="mypath" d="M 175, 175 m 0, -75 a 75, 75 0 1, 0 0, 150 a 75, 75 0 1, 0 0, -150" fill="none" stroke="#ccc" stroke-width="150" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000" transform="scale(0.5)">
            </path>
        </svg>
    </div>
</div>

解决方案

If you want to amend the transform via Snap you would do it very slightly different.

The end result is probably the same to the browser as mefs solution, as it will end up having a similar matrix on the element itself, its really down to whats the most convenient.

You can specify a center point for the scaling, just add it after the scale x & y parameters.

myPath.transform('s0.5,0.5,175,175');  

jsfiddle

Edit: Actually I'm an idiot, its even more simple. I just remembered that Snap automatically uses the center of an object on transform strings if not specified. So in fact you can reduce it to this..

myPath.transform('s0.5');

jsfiddle

这篇关于调整SVG动画大小，同时保持其在其容器中居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！