HTML5支持<svg>标记,允许将SVG嵌入到HTML中.
深入挖掘,我可以在<svg>片段中嵌入一些HTML 吗？例如,我想<table>在我的SVG图形的某些部分放置一个CSS .
我做了一个小测试,Chrome12不喜欢<p>里面的HTML <svg>.是否有一些技术可以使它工作(例如可能是一个html容器标签？)？
允许在HTML中嵌入SVG ...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hmmm....</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
<text>Hello cruel world!</text>
</svg>
</body>
</html>
......反之亦然:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
<foreignObject x="0" y="0" width="100%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<h1>Goodbye cruel world...</h1>
</body>
</foreignObject>
</svg>
规范说(23.2,第三段)(我引用:)"如果你想在SVG中用XGML在SVG中嵌入SVG SVG,那就没关系......".我想哇,那太深了!并做到了这一点:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Yeah!</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
<foreignObject x="0" y="0" width="100%" height="100%">
<body class="svgbody" xmlns="http://www.w3.org/1999/xhtml">
<h1>And hello again!</h1>
</body>
</foreignObject>
</svg>
</body> …我想在我的D3图的x轴上呈现HTML.基本上,我希望轴上的每个标签都是数据中另一列的超链接.
我试过了
x.domain(data.map(function(d) { return "<a href=\"" + d.SiteUrl + "\">" + d.Name + "</a>"; }));
但它根本不起作用.而不是获取超链接我得到实际的文本值:
Run Code Online (Sandbox Code Playgroud)<a href="http://example.com">Something</a>
我也尝试过添加
.tickFormat(function(d) { return "<a href=\"" + d.SiteUrl + "\">" + d.Name + "</a>"; })
在x轴上,以及改变.attr("x", ...)到
.attr("x", function(d) { return "<a href=\"" + d.SiteUrl + "\">" + x(d.Name) + "</a>"; })
在图表上.
我错过了什么吗？
我有直接在浏览器(目前是IE和Firefox)中显示的SVG文档 - 通过将*.svg直接加载到浏览器中.这些文档包含我想要显示为"HTML"的文本,例如在带有自动换行,下标和可能滚动的HTML窗口/面板中呈现.SVG和HTML在正确的命名空间下构建和管理.
典型的元素(没有样式)可能是:
<svg xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="100" y="200" width="300" height="400"/>
<h:p xmlns:h="http://www.w3.org/1999/xhtml">
This is an <h:i>italic</h:i> and a <h:sub>subscript</h:sub> in a ...
very long ... paragraph which will need word wrapping and maybe scrolling
</h:p>
</g>
</svg>
能够在给定的边界框内找到文本(例如<rect />)会很高兴
请注意,目前我不想在HTML文档中嵌入SVG,也不需要递归(例如HTML中没有SVG).
更新:@Sirko鼓励我在网上发现这篇文章已经4年了.