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

【问题标题】：Is it possible to justify SVG text using d3js?是否可以使用 d3js 证明 SVG 文本的合理性？
【发布时间】：2018-02-12 23:29:50
【问题描述】：

我正在使用M.Bostock's wrap function 包装文本，但找不到证明它的方法。

这在 d3 中是否可行？如果没有，有没有办法“模仿”这种文本处置？

编辑：感谢 Logikos 的建议，我从 M.Bostock 中找到了 this example，将 foreignObject 放入了 svg。

这里是sn-p：

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

【问题讨论】：

只是一个警告：foreignObject 不适用于所有浏览器。
另外，我在标题中添加了“SVG”：没有 “D3 文本” 这样的东西。这里的问题是 SVG，而不是 D3。
@GerardoFurtado 是正确的，但是支持还不错，-caniuse.com/#search=foreignObject 在大多数情况下，除了 Opera mini，如果您参考我发布给您的链接，它将适用于您想要做的事情将会了解到过滤效果有一些限制。
@Logikos 它不会为任何 IE（11 及以下）分叉。而且（不幸的是）很多人使用 Internet Explorer。

标签： d3.js svg text justify text-justify

【解决方案1】：

这不是您要找的东西，而是我几年前使用的东西。除了使用该函数来模拟包装之外，您还可以将 html 放在带有 foreignObject 标记的 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 中检查它，在一个地方网站说它不支持它，在另一个地方它说它有点支持它......

【讨论】：

非常感谢 Logikos。该解决方案非常有用且更简单。我已经编辑了我的问题。