调整 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

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

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

你可以为缩放指定一个中心点，只需在缩放x & y参数后添加即可。

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

jsfiddle

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

myPath.transform('s0.5');

jsfiddle

Answer 2

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

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

更新的sn-p：

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

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