[英]How do I animate a text so that it does not rotate while using the SVG's textpath?
我试图使用SVG的文本路径实现的是文本在其动画路径之后不旋转; 因此它在动画时保持水平,如下所示:
事情是文本在默认设置动画时旋转到当前路径角度,使文本看起来像这样:
如何在保持文本水平的同时使用SVG的文本路径来实现动画文本的动画?
编辑:这里要求的是我用于水平文本的代码; 我实际上无法实现动画效果:
<svg>
<path id="MyPath" d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100"/>
<use id="curve" xlink:href="#MyPath" fill="none" stroke="red" />
<text id="origText" fill="white">
<textpath xlink:href="#MyPath" >
OH NOES!, DANCING TEXT ARRIVED!
<animate attributeName="startOffset" from="100%" to ="-100%"
begin="0s" dur="10s" repeatCount="indefinite" keyTimes="0;1"
calcMode="spline" keySplines="0 0 1 1"/>
</textpath>
</text>
</svg>
var t = document.getElementById('origText');
var t_text = t.textContent; // "We go up...."
var curve = document.getElementById("MyPath");
var len = curve.getTotalLength(); // curve length
var steps = len/t_text.length; // get width of step
var start_pt = 0; // start at beginning
var prev_pt = curve.getPointAtLength(0); // measure first step
t.textContent = ""; // clear up original text;
for (var i = 0; i < t_text.length; ++i) { // char loop
var new_pt = curve.getPointAtLength(start_pt); // measure pt
var ts = genTspan(t_text[i], prev_pt, new_pt); // tspan
t.appendChild(ts); // add to <text>
start_pt += steps; // go to next step (point)
prev_pt = new_pt; // remember previous point
}
function genTspan(myChar,prev_pt,new_pt) {
var tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan.setAttributeNS(null, 'dy', new_pt.y - prev_pt.y);
tspan.textContent = myChar;
return tspan;
}
我得到这段代码的来源是来自这个帖子; 路径上的水平文本 ,实际上有助于我实现文本在路径上保持水平,而不是在尝试使用SVG的文本路径设置动画时; 尝试时,显示的文本保持在x =“0”y =“0”而不移动。
与通过其路径移动时旋转其角度的方式不同; 那个实际上按预期动画,这里也是它的代码:
<svg>
<path id="myPath2" fill="none" stroke="#FFFFFF" stroke-miterlimit="10"
d="M91.4,344.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"/>
<text fill="red">
<textpath xlink:href="#myPath2" >
PUMCHY PUMCHY PUMCHY PUMCHY!
<animate attributeName="startOffset" from="100%" to ="-100%" begin="0s"
dur="10s" repeatCount="indefinite" keyTimes="0;1" calcMode="spline" keySplines="0 0 1 1"/>
</textpath>
</text>
</svg>
无法使用<textPath>
保持字符垂直。 但是如果使用运动路径(即<animateMotion>
),则可以执行此操作。
然而,这有点痛苦,因为你必须单独为每个角色制作动画。
<svg width="500px" height="500px"> <path id="myPath2" fill="none" stroke="lightgrey" stroke-miterlimit="10" d="M91.4,344.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3 c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7 c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5 c1.9-2.1,3.7-5.5,6.5-6.5"/> <text fill="red" text-anchor="middle">! <animateMotion dur="6s" repeatCount="indefinite"> <mpath xlink:href="#myPath2"/> </animateMotion> </text> <text fill="red" text-anchor="middle">Y <animateMotion dur="6s" repeatCount="indefinite" begin="0.2s"> <mpath xlink:href="#myPath2"/> </animateMotion> </text> <text fill="red" text-anchor="middle">H <animateMotion dur="6s" repeatCount="indefinite" begin="0.4s"> <mpath xlink:href="#myPath2"/> </animateMotion> </text> <text fill="red" text-anchor="middle">C <animateMotion dur="6s" repeatCount="indefinite" begin="0.6s"> <mpath xlink:href="#myPath2"/> </animateMotion> </text> <text fill="red" text-anchor="middle">N <animateMotion dur="6s" repeatCount="indefinite" begin="0.8s"> <mpath xlink:href="#myPath2"/> </animateMotion> </text> <text fill="red" text-anchor="middle">U <animateMotion dur="6s" repeatCount="indefinite" begin="1.0s"> <mpath xlink:href="#myPath2"/> </animateMotion> </text> <text fill="red" text-anchor="middle">P <animateMotion dur="6s" repeatCount="indefinite" begin="1.2s"> <mpath xlink:href="#myPath2"/> </animateMotion> </text> </svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.