可以用JS / CSS绘制椭圆形文字？

问题描述

是否可以在HTML5中使用javascript在椭圆中绘制名称？我们的目标是能够沿着椭圆上的任意偏移添加名称，例如附加图像。

解决方案

您可以简单地使用 svg 的 textPath 元素来实现此目的。

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

Is it possible to draw names along an oval in HTML5 using javascript? The goal is to be able to add names along an arbitrary offset on the oval like the attached image.

解决方案

You could simply use svg's textPath element to achieve this.

<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>

这篇关于可以用JS / CSS绘制椭圆形文字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！