是否有可能证明SVG文本使用d3js？

问题描述：

我使用M.Bostock's wrap function包装文本，但无法找到证明它的方法。是否有可能证明SVG文本使用d3js？

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

只是一个警告：'foreignObject'没有按” t适用于所有浏览器。 –

另外，我在标题中添加了“SVG”：没有*“D3文本”*之类的东西。这里的问题是SVG，而不是D3。 –

@GerardoFurtado是正确的，但支持并没有那么糟糕， - http://caniuse.com/#search=foreignObject大部分除了opera mini以外，它可以用于你想做的事情，如果你引用链接I张贴你会发现过滤效果有一些限制。 – Logikos

答

这不正是你要找的东西，但我几年前使用。 http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg

为HTML但是你可以风格你想要，文字环绕，合理等等等等

我没有工作 - 而不是使用该功能模仿包装，则可以改为放置在HTML中的SVG与foreignObject标签与d3或SVG在5年以上，所以很难记住，但认为我会分享这种情况下，它是任何用途。

这是从我上面贴的链接示例标记：

< ?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不支持支持将SVG滤镜效果应用于使用CSS的HTML元素。

您应该检查它在IE和边缘，在一个地方网站说，它不支持它，在另一个它说，它支持的话有点...

非常感谢Logikos。这个解决方案非常有用，而且更简单。我编辑了我的问题。 – solub

是否有可能证明SVG文本使用d3js？

相关推荐