css - 无法在路径上消除 svg 文本的倾斜

标签 css svg

我正在尝试在 HTML5 纸牌游戏的 table 外侧沿椭圆路径绘制名称。我已经看到这样做没有倾斜 here ,但是当我调整 s 的数据属性以完美适合表格的曲线时,文本变得倾斜。这可能吗?

我当前的代码在这里(注意用于黑色或青色文本的路径):http://vedanamedia.com/clients/intuitive-eye/forums/2-svg-text-path/

这就是我要做的(注意名字整齐地沿着 table 的外曲线):

design comp

最佳答案

发生这种情况的原因是因为您在 SVG 中基于圆形设计所有内容,但随后将其拉伸(stretch)为椭圆形。这就是导致您的“偏斜”问题的原因。

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

如果您想消除倾斜,请将您的路径曲线设为椭圆形而不是半圆形。您的 viewBox 应具有与宽度/高度相同的纵横比。

关于css - 无法在路径上消除 svg 文本的倾斜,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28247975/

相关文章:

html - 如何防止固定底栏隐藏内容

javascript - 一系列切换 div(n 个像复选框一样切换的两个 div)-JS

php - 将鼠标悬停在另一个 div 上时向右旋转和移动图像

javascript - 多系列时间轴 : plot the lines one by one

javascript - 使用 View 框的响应式 SVG

CSS变换源问题

css - 响应式 SVG 文本路径包装动态内容

html - Bootstrap .form-horizo​​ntal 中的单选按钮

html - 使用onclick使svg图像对象可点击,避免绝对定位

jquery - 窗口调整大小。适应宽度条件