Question

我使用M.Bostock's wrap function包装文字，但找不到合理的方法。

这在d3中甚至可能吗？如果没有，有没有办法“模仿”这种文字处理？

编辑：感谢Logikos建议，我发现M.Bostock的this example在foreignObject内放置了svg。

以下是摘录：

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);
svg.append("foreignObject")
    .attr("width", 480)
    .attr("height", 500)
  .append("xhtml:body")
    .style("font", "14px 'Helvetica Neue'")
    .html("<h1>An HTML Foreign Object in SVG</h1><p>Veeery long text");

然后你只需要添加CSS：

body {text-align: justify;
     text-align-last: start;
}

Answer 1

这不是你想要的，而是几年前我用过的东西。而不是使用该函数来模仿包装，而是可以使用foreignObject标记将html放在svg中 - http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg

作为html，您可以根据需要设置样式，文本换行，对齐等等。

我在5年多的时间里没有与d3或SVG合作过，所以很难记住，但我认为我可以分享它，以防它有用。

这是我在上面发布的链接中的示例标记：

< ?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="150" fill="gray"/>
  <foreignobject x="10" y="10" width="100" height="150">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>Here is a <strong>paragraph</strong> that requires <em>word wrap</em></div>
    </body>

  </foreignobject>

  <circle cx="200" cy="200" r="100" fill="blue" stoke="red"/>
  <foreignobject x="120" y="120" width="180" height="180">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>
        <ul>
          <li><strong>First</strong> item</li>

          <li><em>Second</em> item</li>
          <li>Thrid item</li>
        </ul>
      </div>
    </body>
  </foreignobject>
</svg>

请注意浏览器支持：http://caniuse.com/#search=foreignObject 其中说它将在除了opera mini以外的所有内容中起作用。虽然IE和Edge有一些限制：

1 IE11及以下版本不支持。 2 IE和Edge没有支持使用CSS将SVG滤镜效果应用于HTML元素。

你应该在IE和Edge中检查它，在一个地方，网站说它不支持它，在另一个地方，它说它支持它...

是否可以使用d3js证明SVG文本的合理性？

1 个答案: