blocks|key|815341|text|我只需在我的SVG中嵌入一个真实的表：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|815342|<?xml+version="1.0"+standalone="yes"?>
<svg+xmlns="http://www.w3.org/2000/svg">
++<foreignObject+x="10"+y="10"+width="100"+height="150">
++++<body+xmlns="http://www.w3.org/1999/xhtml">
++++++<table></table>
++++</body>
++</foreignObject>
++
</svg>|code-block|syntax|javascript|815343|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I would simply embed a real table in my SVG:</p>

<pre><code>&lt;?xml version="1.0" standalone="yes"?&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;foreignObject x="10" y="10" width="100" height="150"&gt;
    &lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;table&gt;&lt;!-- ... --&gt;&lt;/table&gt;
    &lt;/body&gt;
  &lt;/foreignObject&gt;
  &lt;!-- ... --&gt;
&lt;/svg&gt;
</code></pre>


blocks|key|815656|text|我有类似的需求，但找不到合适的工具来自动构建SVG图像以显示表格数据(我可以通过Google找到的工具产生难以辨认或无法使用的结果)，所以我构建了自己的工具。您或其他任何在搜索此工具时登录此页面的人可能会发现它很有帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|815657|https://topherrhodes.com/svg-table/|offset|length|815658|该工具使用CSV作为输入，因此如果您必须从HTML表转换，您可以修改脚本以将表转换为JavaScript对象，或者生成CSV作为中间步骤。|815659|一般来说，我同意这里的其他用户的观点，他们提出SVG不是显示表格数据的好格式，为了可用性和兼容性，您应该尽可能选择使用实际的HTML表。但在某些情况下，这可能是不可能的。|815660|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Z|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]]]

<p>I had a similar need and was not able to find a suitable tool for automatically building an SVG image to display tabular data (the tools I could find via Google produced illegible or otherwise unusable results) so I built my own. You or anyone else who lands on this page while searching for such a tool may find it helpful:</p>
<p><a href="https://topherrhodes.com/svg-table/" rel="nofollow noreferrer">https://topherrhodes.com/svg-table/</a></p>
<p>This tool uses a CSV as input, so if you have to go from an HTML table you could modify the script to convert the table to a JavaScript object, or generate a CSV as an intermediate step.</p>
<p>Generally, I agree with the other users here who have brought up how SVG is not a good format for displaying tabular data and that for usability and compatibility you should opt to use an actual HTML table whenever possible. But there may be certain cases where that's not possible.</p>


blocks|key|600119|text|我在github上发现了一个项目，它可以从JavaScript数据结构自动生成一个类似HTML表：https://github.com/cocuh/SVG-Table|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|600120|因为它不依赖于foreignObject，所以它的跨浏览器可移植性要好得多。|600121|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/cocuh/SVG-Table^0|1D|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>I found a project on github which automatically generates an HTML-like table from a JavaScript data structure: <a href="https://github.com/cocuh/SVG-Table" rel="nofollow">https://github.com/cocuh/SVG-Table</a></p>

<p>Since it does not rely on foreignObject, it's portability across browsers is much better.</p>


blocks|key|815425|text|下面是一个SVG+foreignobject示例，其中包含嵌套的SVG元素的表格布局。不过，它只能在Chrome上运行。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|815426|它包括一个HTML布局和一个使用table元素的flexbox布局。|815427|jsfiddle是here。|815428|<body>
<svg+xmlns="http://www.w3.org/2000/svg"+xmlns:xlink="http://www.w3.org/1999/xlink">
++++<defs>
++++++++<g+id="shape">
++++++++++++<rect+x="0"+y="0"+rx="5"+ry="5"+width="100%25"+height="100%25"+fill="inherit"+/>
++++++++++++<circle+cx="50%25"+cy="50%25"+r="8"+fill="yellow"+/>
++++++++</g>
++++</defs>
++++<foreignobject+width="100%25"+height="50px"+y="0">

++++++++<body+xmlns="http://www.w3.org/1999/xhtml">
++++++++++++<table+width="100%25">
++++++++++++++++<tr>
++++++++++++++++++++<td+colspan="3">
++++++++++++++++++++++++<div+style="height:20px">
++++++++++++++++++++++++++++<svg>
++++++++++++++++++++++++++++++++<use+xlink:href="#shape"+fill="CornflowerBlue"+/>
++++++++++++++++++++++++++++</svg>
++++++++++++++++++++++++</div>
++++++++++++++++++++</td>
++++++++++++++++</tr>
++++++++++++++++<tr>
++++++++++++++++++++<td>
++++++++++++++++++++++++<div+style="height:20px">
++++++++++++++++++++++++++++<svg>
++++++++++++++++++++++++++++++++<use+xlink:href="#shape"+fill="SlateBlue"+/>
++++++++++++++++++++++++++++</svg>
++++++++++++++++++++++++</div>
++++++++++++++++++++</td>
++++++++++++++++++++<td>
++++++++++++++++++++++++<div+style="height:20px">
++++++++++++++++++++++++++++<svg>
++++++++++++++++++++++++++++++++<use+xlink:href="#shape"+fill="SlateBlue"+/>
++++++++++++++++++++++++++++</svg>
++++++++++++++++++++++++</div>
++++++++++++++++++++</td>
++++++++++++++++++++<td>
++++++++++++++++++++++++<div+style="height:20px">
++++++++++++++++++++++++++++<svg>
++++++++++++++++++++++++++++++++<use+xlink:href="#shape"+fill="SlateBlue"+/>
++++++++++++++++++++++++++++</svg>
++++++++++++++++++++++++</div>
++++++++++++++++++++</td>
++++++++++++++++</tr>
++++++++++++</table>
++++++++</body>
++++</foreignobject>
++++<foreignobject+width="100%25"+height="50px"+y="60">

++++++++<body+xmlns="http://www.w3.org/1999/xhtml">
++++++++++++<div+style="display:flex;flex-direction:column">
++++++++++++++++<div>
++++++++++++++++++++<div+style="height:20px;padding:2px">
++++++++++++++++++++++++<svg>
++++++++++++++++++++++++++++<use+xlink:href="#shape"+fill="orange"+/>
++++++++++++++++++++++++</svg>
++++++++++++++++++++</div>
++++++++++++++++</div>
++++++++++++++++<div+style="display:flex;flex-direction:row;align-items:stretch">
++++++++++++++++++++<div+style="width:33.333%25;height:20px;padding:2px">
++++++++++++++++++++++++<svg>
++++++++++++++++++++++++++++<use+xlink:href="#shape"+fill="forestgreen"+/>
++++++++++++++++++++++++</svg>
++++++++++++++++++++</div>
++++++++++++++++++++<div+style="width:33.333%25;height:20px;padding:2px">
++++++++++++++++++++++++<svg>
++++++++++++++++++++++++++++<use+xlink:href="#shape"+fill="forestgreen"+/>
++++++++++++++++++++++++</svg>
++++++++++++++++++++</div>
++++++++++++++++++++<div+style="width:33.333%25;height:20px;padding:2px">
++++++++++++++++++++++++<svg>
++++++++++++++++++++++++++++<use+xlink:href="#shape"+fill="forestgreen"+/>
++++++++++++++++++++++++</svg>
++++++++++++++++++++</div>
++++++++++++++++</div>
++++++++++++</div>
++++++++</body>
++++</foreignobject>
</svg>|code-block|syntax|javascript|815429|​|815430|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject|1|http://www.w3schools.com/html/html_layout.asp|2|https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes|3|http://jsfiddle.net/XmC2A/1/^0|9|D|0|0|G|5|1|O|7|2|0|9|4|3|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]|$A|1A|B|1B|1|1C]]|C|$]]|$1|F|3|G|5|6|7|1D|8|@]|9|@$A|1E|B|1F|1|1G]]|C|$]]|$1|H|3|I|5|J|7|1H|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1I|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1J|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]|Y|$5|R|S|T|C|$U|Z]]|10|$5|R|S|T|C|$U|11]]]]

<p>Here is an example showing an SVG <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject" rel="nofollow">foreignobject</a> which contains a tabular layout of nested SVG elements. It only works in Chrome though.</p>

<p>It includes an HTML <a href="http://www.w3schools.com/html/html_layout.asp" rel="nofollow">table</a> layout and a <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" rel="nofollow">flexbox</a> layout using div elements.</p>

<p>A jsfiddle is <a href="http://jsfiddle.net/XmC2A/1/" rel="nofollow">here</a>.</p>

<pre><code>&lt;body&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;defs&gt;
        &lt;g id="shape"&gt;
            &lt;rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="inherit" /&gt;
            &lt;circle cx="50%" cy="50%" r="8" fill="yellow" /&gt;
        &lt;/g&gt;
    &lt;/defs&gt;
    &lt;foreignobject width="100%" height="50px" y="0"&gt;

        &lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;
            &lt;table width="100%"&gt;
                &lt;tr&gt;
                    &lt;td colspan="3"&gt;
                        &lt;div style="height:20px"&gt;
                            &lt;svg&gt;
                                &lt;use xlink:href="#shape" fill="CornflowerBlue" /&gt;
                            &lt;/svg&gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;
                        &lt;div style="height:20px"&gt;
                            &lt;svg&gt;
                                &lt;use xlink:href="#shape" fill="SlateBlue" /&gt;
                            &lt;/svg&gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
                    &lt;td&gt;
                        &lt;div style="height:20px"&gt;
                            &lt;svg&gt;
                                &lt;use xlink:href="#shape" fill="SlateBlue" /&gt;
                            &lt;/svg&gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
                    &lt;td&gt;
                        &lt;div style="height:20px"&gt;
                            &lt;svg&gt;
                                &lt;use xlink:href="#shape" fill="SlateBlue" /&gt;
                            &lt;/svg&gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
        &lt;/body&gt;
    &lt;/foreignobject&gt;
    &lt;foreignobject width="100%" height="50px" y="60"&gt;

        &lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;
            &lt;div style="display:flex;flex-direction:column"&gt;
                &lt;div&gt;
                    &lt;div style="height:20px;padding:2px"&gt;
                        &lt;svg&gt;
                            &lt;use xlink:href="#shape" fill="orange" /&gt;
                        &lt;/svg&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div style="display:flex;flex-direction:row;align-items:stretch"&gt;
                    &lt;div style="width:33.333%;height:20px;padding:2px"&gt;
                        &lt;svg&gt;
                            &lt;use xlink:href="#shape" fill="forestgreen" /&gt;
                        &lt;/svg&gt;
                    &lt;/div&gt;
                    &lt;div style="width:33.333%;height:20px;padding:2px"&gt;
                        &lt;svg&gt;
                            &lt;use xlink:href="#shape" fill="forestgreen" /&gt;
                        &lt;/svg&gt;
                    &lt;/div&gt;
                    &lt;div style="width:33.333%;height:20px;padding:2px"&gt;
                        &lt;svg&gt;
                            &lt;use xlink:href="#shape" fill="forestgreen" /&gt;
                        &lt;/svg&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/body&gt;
    &lt;/foreignobject&gt;
&lt;/svg&gt;
</code></pre>

<p></p>


<p>I'm trying to create a table-like object within an SVG document. Currently, due to the fact that SVG does not have a table element, I am using an HTML parser to go through and convert an HTML table, (created by the user in an HTML table Builder), to a group of SVG objects, and then adding that to my overall SVG drawing. I was wondering if any one was able to find a better alternative to this method, such as an SVG table builder? I'm looking to accomplish this using Javascript or jquery.  Any ideas or suggestions would be appreciated. </p>


Create a table in SVG

数据结构

我正在尝试在SVG文档中创建一个类似于表的对象。目前，由于SVG没有table元素，我正在使用HTML解析器将一个HTML表(由用户在HTML table Builder中创建)转换为一组SVG对象，然后将其添加到我的整个SVG绘图中。我想知道是否有人能够找到比这种方法更好的替代方法，比如SVG表生成器？我希望使用Javascript或jquery来实现这一点。任何想法或建议都将不胜感激。

问在SVG中创建表
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在SVG中创建表EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在SVG中创建表
EN