Javascript SVG中的HTML表显示为空
我使用表数据制作SVG，但它是空白的，我不确定我做错了什么。下面是我的代码Javascript SVG中的HTML表显示为空,javascript,html,svg,Javascript,Html,Svg,我使用表数据制作SVG，但它是空白的，我不确定我做错了什么。下面是我的代码 <svg> <foreignObject> <body xmlns="http://www.w3.org/1999/xhtml"> <table> <thead> <tr><th>Filter</th> <th>Values</th></tr> </thead&g
<svg>
<foreignObject>
<body xmlns="http://www.w3.org/1999/xhtml">
<table>
<thead>
<tr><th>Filter</th>
<th>Values</th></tr>
</thead>
<tbody>
<tr>
<td>XYZ</td>
<td>true</td>
</tr>
<tr>
<td>ABC</td>
<td>false</td>
</tr>
</tbody>
</table>
</body>
</foreignObject>
</svg>
滤器
价值观
XYZ
真的
基础知识
假的
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
fill="none" stroke="none" stroke-width="0" class="dxc dxc-chart" style="line-height:normal;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);display:block;overflow:hidden;touch-action:pan-x pan-y pinch-zoom;-ms-touch-action:pan-x pan-y pinch-zoom;" width="920" height="280" onclick="void(0)" direction="ltr"><defs><filter id="DevExpress_232" x="-50%" y="-50%" width="200%" height="200%" transform="translate(0,0)"><feGaussianBlur in="SourceGraphic" result="gaussianBlurResult" stdDeviation="3"></feGaussianBlur><feOffset in="gaussianBlurResult" result="offsetResult" dx="2" dy="6"></feOffset><feFlood result="floodResult" flood-color="" flood-opacity="0.8"></feFlood><feComposite in="floodResult" in2="offsetResult" operator="in" result="compositeResult"></feComposite><feComposite in="SourceGraphic" in2="compositeResult" operator="over"></feComposite></filter><clipPath id="DevExpress_234"><rect x="0" y="0" width="920" height="280" transform="translate(0,0)"></rect></clipPath><pattern id="DevExpress_255" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#85bc5e" opacity="0.75"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#85bc5e" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_256" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#85bc5e" opacity="0.5"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#85bc5e" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_257" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#d47a6a" opacity="0.75"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#d47a6a" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_258" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#d47a6a" opacity="0.5"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#d47a6a" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_259" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#d4bf6a" opacity="0.75"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#d4bf6a" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_260" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#d4bf6a" opacity="0.5"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#d4bf6a" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_267" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="#85bc5e" opacity="0.75"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="#85bc5e" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_268" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="#85bc5e" opacity="0.5"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="#85bc5e" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_269" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="#d47a6a" opacity="0.75"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="#d47a6a" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_270" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="#d47a6a" opacity="0.5"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="#d47a6a" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_271" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="#d4bf6a" opacity="0.75"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="#d4bf6a" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_272" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="#d4bf6a" opacity="0.5"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="#d4bf6a" transform="translate(0,0)"></path></pattern><clipPath id="DevExpress_273"><rect x="65" y="8" width="754" height="246" transform="translate(0,0)"></rect></clipPath><clipPath id="DevExpress_274"><rect x="65" y="8" width="754" height="246" transform="translate(0,0)"></rect></clipPath></defs><rect x="0" y="0" width="920" height="280" transform="translate(0,0)" fill="gray" opacity="0.0001"></rect><g class="dxc-background"></g><g class="dxc-strips-group"><g class="dxc-arg-strips" clip-path="url(#DevExpress_273)"></g><g class="dxc-val-strips" clip-path="url(#DevExpress_273)"></g></g><g class="dxc-grids-group"><g class="dxc-val-grid"><path d="M 65 254 L 819 254" transform="translate(0,0.5)" stroke="#dddddd" stroke-width="1" stroke-opacity="0"></path><path d="M 65 205 L 819 205" transform="translate(0,0.5)" stroke="#dddddd" stroke-width="1" stroke-opacity="0"></path><path d="M 65 156 L 819 156" transform="translate(0,0.5)" stroke="#dddddd" stroke-width="1" stroke-opacity="0"></path><path d="M 65 106 L 819 106" transform="translate(0,0.5)" stroke="#dddddd" stroke-width="1" stroke-opacity="0"></path><path d="M 65 57 L 819 57" transform="translate(0,0.5)" stroke="#dddddd" stroke-width="1" stroke-opacity="0"></path><path d="M 65 8 L 819 8" transform="translate(0,0.5)" stroke="#dddddd" stroke-width="1" stroke-opacity="0"></path></g><g class="dxc-arg-grid"><path d="M 442 254 L 442 8" transform="translate(0.5,0)" stroke="#dddddd" stroke-width="1" stroke-opacity="0"></path></g></g><g class="dxc-axes-group"><g class="dxc-arg-axis" clip-path="url(#DevExpress_234)"><g class="dxc-arg-elements"><text x="254" y="277" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Known</text><text x="631" y="277" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Unknown</text></g><g class="dxc-arg-line"></g><g class="dxc-arg-title"></g></g><g class="dxc-val-axis" clip-path="url(#DevExpress_234)"><g class="dxc-val-elements"><text x="56" y="259" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">0%</text><text x="56" y="210" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">20%</text><text x="56" y="161" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">40%</text><text x="56" y="111" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">60%</text><text x="56" y="62" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">80%</text><text x="56" y="13" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">100%</text></g><g class="dxc-val-line"></g><g class="dxc-val-title"><text x="16" y="131" transform="translate(0,0) rotate(270,16,131)" style="fill:#767676;font-size:14px;font-family:Palatino Linotype;font-weight:400;cursor:default;" text-anchor="middle">Percentage</text></g></g></g><g class="dxc-constant-lines-group"><g class="dxc-arg-constant-lines"></g><g class="dxc-val-constant-lines"></g></g><g class="dxc-strips-labels-group"><g class="dxc-arg-axis-labels"></g><g class="dxc-val-axis-labels"></g></g><g class="dxc-border"></g><g class="dxc-series-group"><g class="dxc-series"><g fill="#85bc5e" stroke="#85bc5e" stroke-width="0" class="dxc-markers" opacity="1" clip-path="" transform="translate(0,0) scale(1,1)"><rect x="525" y="235" width="211" height="19" transform="translate(0,0)" rx="0" ry="0" stroke-width="0"></rect><rect x="148" y="120" width="211" height="134" transform="translate(0,0)" rx="0" ry="0" stroke-width="0"></rect></g></g><g class="dxc-series"><g fill="#d47a6a" stroke="#d47a6a" stroke-width="0" class="dxc-markers" opacity="1" clip-path="" transform="translate(0,0) scale(1,1)"><rect x="148" y="119" width="211" height="1" transform="translate(0,0)" rx="0" ry="0" stroke-width="0"></rect></g></g><g class="dxc-series"><g fill="#d4bf6a" stroke="#d4bf6a" stroke-width="0" class="dxc-markers" opacity="1" clip-path="" transform="translate(0,0) scale(1,1)"><rect x="525" y="8" width="211" height="227" transform="translate(0,0)" rx="0" ry="0" stroke-width="0"></rect><rect x="148" y="8" width="211" height="111" transform="translate(0,0)" rx="0" ry="0" stroke-width="0"></rect></g></g></g><g class="dxc-labels-group"><g class="dxc-labels" clip-path="url(#DevExpress_274)" opacity="1" transform="translate(0,0)"></g><g class="dxc-labels" clip-path="url(#DevExpress_274)" opacity="1" transform="translate(0,0)"></g><g class="dxc-labels" clip-path="url(#DevExpress_274)" opacity="1" transform="translate(0,0)"></g></g><g class="dxc-crosshair-cursor"></g><g class="dxc-legend" clip-path="url(#DevExpress_234)" transform="translate(0,0)"><g transform="translate(829,10)"><rect x="0" y="0" width="12" height="12" transform="translate(0,2)" fill="#85bc5e"></rect><text x="0" y="0" transform="translate(19,13)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="start">Recognized</text><rect x="0" y="0" width="12" height="12" transform="translate(0,26)" fill="#d47a6a"></rect><text x="0" y="0" transform="translate(19,37)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="start">Rejected</text><rect x="0" y="0" width="12" height="12" transform="translate(0,50)" fill="#d4bf6a"></rect><text x="0" y="0" transform="translate(19,61)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="start">Unknown</text></g></g>
known未知0%20%40%60%80%100%agerecognizedRejectedUnknown
添加了xmlns属性，它起作用了谢谢@Paul起作用了，也许可以检查
宽度和高度
什么浏览器？不支持
@George我正在使用chrome。如果我在JSFIDLE或plnkr上尝试它，它就会显示出来，否则就不会。我也尝试了宽度和高度。SVG是独立文件吗？如果是这样，请确保SVG具有xmlns
属性。您的第一个示例没有，但是独立的SVG文件需要它。您说过它在JSFIDLE中工作。FIDLE在哪里？请提供一份报告。