SVG <symbol> 的 refX/refX 属性并相对于其中心放置 <symbol>

Question

根据SVG的符号文档，我可以向其添加refX / refY属性。

如果我理解正确，我可以使用这些属性在符号的坐标系中定义一个参考点，这样当我用<use>元素引用它时，它将相对于该参考点放置（而不是默认的左上角）。

但这些属性似乎并没有做到这一点，或者对符号的位置没有任何影响。我找不到有关这些属性（对于符号）或它们是否在任何浏览器中受支持的任何其他信息。

这就是 refX/refY 实际工作的方式吗？它们是否在任何浏览器中实现？

如果没有，是否有其他方法可以<use>在不提前知道/计算其实际宽度/高度的情况下，将具有相对于符号中心的元素的符号放置？

Answer 1

我还发现 refX 和 refY 不适用于符号。不过，我确实找到了一种解决方法来有效地做同样的事情。关键是将符号“overflow”变量设置为“visible”。当使用“use”功能时，符号的插入点始终是符号坐标系的原点（0,0 坐标），因此您只需以某种方式设置符号，使符号原点位于您想要插入它的点的顶部。我发现使用变换很容易做到这一点，因为您只需使用所需插入点的负值即可。

将插入点设置为正方形中心的示例：

<symbol id="test" overflow="visible" >
   <g transform="translate(-50 -50)" >
      <rect x="0" y="0" width="100" height="100" stroke="black"/>
   </g>
</symbol>