尝试支持动画时 SVG 文本颠倒
[英]SVG text upside down when trying to support animation
问题描述
我无法使文本方向正确。 我按照SVG TextPath上的建议尝试了文本显示颠倒，但它使动画从相反的一侧开始。 我需要从初始节点开始动画。
我正在使用stroke-dashoffset 和stroke-dasharray 制作动画。 在下面的代码中，我展示了各种可能的线条，方向用箭头表示。
<!DOCTYPE html> <html> <head> <style> @keyframes dash { to { stroke-dashoffset: 0; } } path { animation: dash 2s linear forwards; stroke-dasharray: 1500; stroke-dashoffset: 1500; } </style> </head> <body> <svg width="1580" height="390" viewbox="0 0 1580 790" preserveaspectratio="none"> <g> <g transform="translate(0,80)"> <g> <path d="M 280 120 300 120 C 702 120, 780 120, 780 120 S 858 120, 1300 120" id="link1" stroke-width="20" fill="none" stroke="#bcb8b8"></path> <text> <textpath xlink:href="#link1" startoffset="10"> <tspan dy="5" dx="0"> Some Text -> </tspan> </textpath> </text> </g> <g> <path d="M 1300 170 858 170 C 780 170, 780 170, 702 170 S 300 170, 280 170" id="link2" stroke-width="20" fill="none" stroke="#bcb8b8"></path> <text> <textpath xlink:href="#link2" startoffset="10"> <tspan dy="5" dx="0"> <- Some Text </tspan> </textpath> </text> </g> <g> <path d="M 440,330 C 748,330 748,460 440,460" id="link3" stroke-width="20" fill="none" stroke="#bcb8b8"></path> <text> <textPath xlink:href="#link3" startOffset="10"> <tspan dy="5" dx="0"> Some Text -> </tspan> </textPath> </text> </g> <g> <path d="M 740,460 C 1048,460 1048,330 740,330" id="link4" stroke-width="20" fill="none" stroke="#bcb8b8"></path> <text> <textPath xlink:href="#link4" startOffset="10"> <tspan dy="5" dx="0"> Some Text -> </tspan> </textPath> </text> </g> <g> <path d="M 640,660 C 340,660 340,530 640,530" id="link5" stroke-width="20" fill="none" stroke="#bcb8b8"></path> <text> <textpath xlink:href="#link5" startoffset="10"> <tspan dy="5" dx="0"> Some Text -> </tspan> </textpath> </text> </g> <g> <path d="M 950,530 C 650,530 650,660 950,660" id="link6" stroke-width="20" fill="none" stroke="#bcb8b8"></path> <text> <textpath xlink:href="#link6" startoffset="10"> <tspan dy="5" dx="0"> Some Text -> </tspan> </textpath> </text> </g> </g> </svg> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2019-04-05 20:40:07
我的解决方案是对文本使用反向路径。 我已经将反向路径放在<defs> 。 我在使用反向路径的地方使用了金色笔划。 我希望这是你所需要的。
@keyframes dash { to { stroke-dashoffset: 0; } } path { animation: dash 2s linear forwards; stroke-dasharray: 1500; stroke-dashoffset: 1500; } svg{border:1px solid}
<svg viewbox="0 0 1580 790"> <defs> <path d="M280,170C300,170 624,170 702,170C780,170 780,170 1300,170" id="reversed2" ></path> <path d="M640,530C340,530 340,660 640,660" id="reversed5" /> <path d="M950,660C650,660 650,530 950,530" id="reversed6" /> </defs> <g> <g transform="translate(0,80)"> <g> <path d="M 280 120 300 120 C 702 120, 780 120, 780 120 S 858 120, 1300 120" id="link1" stroke-width="20" fill="none" stroke="#bcb8b8"></path> <text> <textpath xlink:href="#link1" startoffset="10"> <tspan dy="5" dx="0"> Some Text -> </tspan> </textpath> </text> </g> <g> <path d="M 1300 170 C 780 170, 780 170, 702 170 S 300 170, 280 170" id="link2" stroke-width="20" fill="none" stroke="gold"></path> <text> <textpath xlink:href="#reversed2" startoffset="100%" text-anchor="end"> <tspan dy="5" dx="0"> <- Some Text </tspan> </textpath> </text> </g> <g> <path d="M 440,330 C 748,330 748,460 440,460" id="link3" stroke-width="20" fill="none" stroke="#bcb8b8"></path> <text> <textPath xlink:href="#link3" startOffset="10"> <tspan dy="5" dx="0"> Some Text -> </tspan> </textPath> </text> </g> <g> <path d="M 740,460 C 1048,460 1048,330 740,330" id="link4" stroke-width="20" fill="none" stroke="#bcb8b8"></path> <text> <textPath xlink:href="#link4" startOffset="10"> <tspan dy="5" dx="0"> Some Text -> </tspan> </textPath> </text> </g> <g> <path d="M 640,660 C 340,660 340,530 640,530" id="link5" stroke-width="20" fill="none" stroke="gold"></path> <text> <textpath xlink:href="#reversed5" startoffset="100%" text-anchor="end"> <tspan dy="5" dx="0"> Some Text -> </tspan> </textpath> </text> </g> <g> <path d="M 950,530 C 650,530 650,660 950,660" id="link6" stroke-width="20" fill="none" stroke="gold"></path> <text> <textpath xlink:href="#reversed6" startoffset="100%" text-anchor="end"> <tspan dy="5" dx="0"> Some Text -> </tspan> </textpath> </text> </g> </g> </svg>
SVG TextPath文本显示颠倒
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.