我有一个包含一系列行和列的网页，每列都有一个图标或图像文件。触摸图像时，它会改变颜色。我目前正在使用JQuery进行此操作并使用新颜色交换新图像。
我在想我可以对SVG对象做同样的事情，然后只更改对象的样式类。 我遇到的问题是让我的SVG对象实际上坐在表格单元格中。 我的SVG代码：
<svg>
<path d="m 524.9 304 c 53.3 0 96.1 12.7 96.1 28.6 l 0 78 c 0 15.8 -42.9 28.6 -96.1 28.6 -53.3 0 -96.1 -12.7 -96.1 -28.6 l 0 -78 c 0 -15.8 42.9 -28.6 96.1 -28.6 z" id="seat" />
</svg>
即使我把它放在<td></td>内，这也会在我的页面中间绘制对象。
有没有办法让路径像一个形状一样居中？
答案 0 :(得分：1)
难以告诉上下文，但只是从你在那里的代码看来你应该为svg元素分配一个大小。
使用svg调整大小有点奇怪，因为它意味着可扩展。我建议您在<svg>标记中添加三个额外属性：
width和height，它们是svg元素在页面上显示的大小。这些非常简单，您可以使用css进行调整。
viewBox是非常重要的一个。它定义了图像的边界，并为您提供了相对大小的控制。其值应为包含4个以空格分隔的值的字符串：x y w h其中x和y表示图像中可见的部分左上角的坐标， w和h是图像可见部分的宽度和高度。这些坐标在您的绘图中是相对的，并将缩放到width和height定义的显示尺寸。
如果您的路径或其他svg元素的坐标位于viewBox之外，它们将被有效地裁剪掉。
我整理了fiddle，这有助于说明宽度，高度和viewBox的关系。希望有所帮助。