难以使路径上的svg文本倾斜 [英] Having trouble de-skewing svg text on path

问题描述

我正在尝试在HTML5纸牌游戏的桌子外侧沿椭圆形路径绘制名称.我已经看到此操作没有偏斜，此处 ，但是当我调整s的data属性以完全适合表格的曲线时，文本变得歪斜了.这可能吗?

I am trying to draw names along an elliptical path on the outside of a table for an HTML5 card game. I have seen this done without skew here, but the text became skewed when I adjusted the s' data attribute to perfectly fit the curve of the table. Is this possible?

我当前的代码在这里(请注意用于黑色或青色文本的路径):

My current code is here (notice the path used for the text in black or cyan): http://vedanamedia.com/clients/intuitive-eye/forums/2-svg-text-path/

这就是我要去的地方(注意，名称恰好跟随桌子周围的外部曲线):

And this is what I'm going for (notice names neatly following outer curve around the table):

推荐答案

发生这种情况的原因是，您正在基于SVG中的一个圆形设计所有内容，然后将其拉伸为椭圆形.这就是导致您的歪斜"问题的原因.

The reason this is happening is because you are designing everything based on a circle in your SVG, but are then stretching it to an ellipse shape. This is what is causing your "skew" problems.

viewBox="0 0 100 100" height="739" width="1086.4872340425532"

如果要消除偏斜，请使路径曲线为椭圆形而不是半圆形.您的viewBox的宽高比应与宽度/高度相同.

If you want to get rid of the skew, make your path curves elliptical rather than semi-circular. Your viewBox should have the same aspect ratio as your width/height.

这篇关于难以使路径上的svg文本倾斜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！