javascript - 可以用 JS/CSS 沿椭圆绘制文本吗?

标签 javascript html css

<分区>

是否可以使用 javascript 在 HTML5 中沿椭圆形绘制名称?目标是能够像附图一样沿着椭圆上的任意偏移添加名称。

Drawing on an oval

最佳答案

您可以简单地使用 svgtextPath 元素来实现这一点。

<svg width="300" height="150" viewBox="0 -15 200 130">
  <path d="M0,50 c0,-65 200,-65 200,0 c0,65 -200,65 -200,0" fill="#645432" />
  <path id="shape2" d="M0,50 c0,65 200,65 200,0 c0,-65 -200,-65 -200,0" fill="none" />
  <path id="shape" d="M12,50 c0,-52 180,-52 176,0 c0,52 -180,52 -176,0" fill="#987C54" stroke="#8BAC96" />
  <text><textPath startOffset="30" xlink:href="#shape">Jonathon</textPath></text>
  <text><textPath startOffset="150" xlink:href="#shape">Sierra</textPath></text>
  <text><textPath startOffset="40" xlink:href="#shape2">Naomie</textPath></text>
  <text><textPath startOffset="170" xlink:href="#shape2">Daniel</textPath></text>
</svg>

关于javascript - 可以用 JS/CSS 沿椭圆绘制文本吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28160269/

相关文章:

html - 褪色垂直线

html - div移动和调整大小

html - 元素不会在适当的位置从纵向切换到横向 ipad

javascript - 如何将 float div 的高度设置为其邻居的相同高度

javascript - div 在 jQuery.show() 之后的位置;

javascript - 如何通过数组传入的 Id 选择剑道网格项?

javascript - 为什么不需要工作来验证我的表格?

javascript - Morris.Line js 无法将年更改为月

css - 图片链接在悬停时移动

javascript - 在 iframe 中玩游戏时禁用滚动父页面