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＆amp;之后添加它。 y参数。

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

jsfiddle

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

myPath.transform('s0.5');

jsfiddle

调整SVG动画的大小，同时使其在容器中居中

2 个答案: