0

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

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

编辑：多亏了 Logikos 的建议，我从 M.Bostock 找到了这个例子，把一个foreignObjectinside 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;
}
4

1 回答 1

0

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

于 2017-09-04T18:18:12.320 回答