调整 SVG 动画的大小，同时保持它在容器中居中

Question

我正在尝试将 <path> 动画水平和垂直居中（在使用 transform="scale(0.5)) 将其缩小后，同时将 <svg> 保持在其容器的 100% 宽度和高度. 我正在使用 Snap.svg.

正如您在下面看到的，<svg> 很好，但是 <path> 都挤在左上角了。

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>

Answer 1

对象的位置受缩放变换的影响。添加翻译以便将对象移动到正确的位置，就在 scale:

之后

transform="scale(0.5)translate(175,175)"

更新的代码段：

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)translate(175,175)">
            </path>
        </svg>
    </div>
</div>

编辑：根据您评论中的问题可能的其他选项：

选项 1 如果您根本不想翻译，您可以 更改 viewBox 坐标 ，这样：

<svg id="me" viewBox="-75 -75 350 350" width="100%" height="100%">

请注意，我没有花时间计算与您相关的确切内容，但您明白了。您应该调整这四个值，以便它们与您想要获得的视口相匹配。

选项 2

做一些数学运算，将当前路径坐标替换为小两倍的对象的路径坐标，这样您就不再需要缩放变换了。

Answer 2

如果你想通过 Snap 修改转换，你会做一些非常不同的事情。

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

您可以指定缩放的中心点，只需将其添加在缩放 x 和 y 参数之后即可。

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

jsfiddle

编辑：其实我是白痴，更简单。我只记得如果未指定，Snap 会自动在转换字符串上使用对象的中心。所以实际上你可以把它减少到这个..

myPath.transform('s0.5');

jsfiddle

调整 SVG 动画的大小，同时保持它在容器中居中

Resizing SVG animation while keeping it centered in its container

css

svg

snap.svg