Question

我正在尝试使用HTML和SVG将文本应用于圆柱体的3D图像。我可以使文本跟随文本路径或计算文本范围的dx和dy，以便它遵循椭圆的曲线，但透视是错误的。我已经看到了具有正确视角的示例，但它们是使用像Corel Draw这样的绘图程序创建的，我需要它在响应式Web站点中工作。

文本路径垂直弯曲文本，例如L刚刚在圆柱体的外边缘处倾斜，其中L的垂直部分应该与圆柱体的边平行。

使用带有dx和dy属性的textspan使L垂直部分保持垂直，但基部不遵循椭圆路径。

我写入圆柱体的文字相当有限，所以我可以将它预先处理成一组字形，但手动执行此操作的可能性太大。

我很欣赏有关如何使这种外观在视觉上正确的提示。

- 已编辑 - 根据评论，我现在意识到即使我可以伪造3D图像也没有z轴，所以为了使这个工作正常我可能需要使用支持3D图像的东西生成图形。如果我理想地使用这样的东西，它会产生反应感。

以下是一个例子：

https://jsfiddle.net/9bzaytnj/

  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <ellipse cx="65" cy="50" rx="60" ry="15" id="lid"></ellipse>
      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="rgb(80,80,80)"></stop>
        <stop offset="30%" stop-color="rgb(255,255,255)"></stop>
        <stop offset="100%" stop-color="rgb(80,80,80)"></stop>
      </linearGradient>
      <ellipse cx="65" cy="70" rx="60" ry="15" id="bottom"></ellipse>
      <rect x="5" y="50" width="120" height="20" id="face"></rect>
      <clipPath id="clip" clipPathUnits="userSpaceOnUse">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bottom"></use>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#face"></use>
      </clipPath>
      <path id="myTextPath" d="M5,62.5 a35,9 0 1,0 120,0"></path>
    </defs>
    <rect x="5" y="50" width="120" height="35" fill="url(#gradient)" clip-path="url(#clip)"></rect>
    <use fill="grey" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lid"></use>
    <text style="font-size:10">
      <textPath anchor="middle" startoffset="20%" xlink:href="#myTextPath" >LX HHH LL HHH</textPath>
    </text>
    <path d="M5,70 a35,9 0 1,0 120,0" style="stroke:#660000; fill:none;"></path>
  </svg>

SVG，我如何定义要应用于圆柱体的文本？

0 个答案: