Question

我正在尝试渲染内部有文本的圆圈，它沿着给定的路径运行。标记d3看起来很好，但Chrome没有显示文本。经过检查，文本元素的宽度为0，高度为0。

这是样本标记，仅包含两个圆圈：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 950 600">
  <g>
    <g transform="translate(334.14792673070184,58.96385042366173)">
      <defs>
        <path id="path-1" d="m5,50 a45,45 0 0 0 90,0"></path>
      </defs>
      <circle class="circle" fill="#ccc" cx="50" cy="50" r="50"></circle>
      <text fill="#333" font-size="15px">
        <textpath xlink:href="#path-1" start-offset="0%">123456</textpath>
      </text>
      <use xlink:href="#path-1" fill="#666" opacity="0.1"></use>
    </g>
  </g>
  <g transform="translate(374.66047394649974,371.7948729806046)">
    <defs>
      <path id="path-2" d="m5,50 a45,45 0 0 0 90,0"></path>
    </defs>
    <circle class="circle" fill="#ccc" cx="50" cy="50" r="50"></circle>
    <text fill="#333" font-size="15px">
      <textpath xlink:href="#path-2" start-offset="0%">123456</textpath>
    </text>
    <use xlink:href="#path-2" fill="#666" opacity="0.1"></use>
  </g>
</svg>

当我在Chrome控制台中检查标记并单击SVG元素上的“编辑为HTML”时，进行随机更改，另存为＆amp;退出 - SVG突然正确呈现。完全相同的事情发生在Firefox和Opera。

将生成的标记复制粘贴到jsfiddle中可以按预期渲染所有内容。我试过拉＆lt; defs＆gt;将每个单独的组标记为单个全局＆lt; defs＆gt;但它没有解决问题。我还查看了可能会干扰渲染的user-agent-stylesheet和其他CSS规则。

这是包含SVG标记的方式和/或容器元素的宽度/高度属性的问题吗？我已经尝试了不同的事情来解决这个问题几个小时了......

以下是完整的SVG标记http://pastebin.com/J2Lz8p23 以下是我的代码http://pastebin.com/Bym8kJVN

中的相关部分

D3.js未渲染路径上的文本（无高度/宽度）

0 个答案: