SVG中的HTML表格作为空白来到

-1

我使用表格数据制作SVG，但它是空白的，我不确定我做错了什么。下面是我的代码SVG中的HTML表格作为空白来到

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

下面是我的SVG图，我想上表中追加到我的图表，使图表应该进来表后下一行。

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

Fiddle link

来源

2017-04-19 Vijayendra Shah

作品[为我好（https://jsbin.com/qibarexeva/edit?html,output），或许检查' George

的宽度和高度是什么浏览器？ [Internet Explorer]（https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject#Browser_compatibility）不支持''。 – zero298

@George我正在使用铬。如果我在jsfiddle或plnkr上试用它，否则它不会。我也试过宽度和高度。 –