Snap.svg 未能为 <use> 标记元素进行 .transform()

Posted 2023-03-28

【中文标题】Snap.svg 未能为 <use> 标记元素进行 .transform()

【英文标题】：Snap.svg failing to .transform() for <use> tag element

【发布时间】：2021-12-25 15:43:56

【问题描述】：

我的 svg 中有一个 use 元素，例如

<use x="47.46" y="44.64" cx="48" cy="45" id="9zh7" href="#msi_plane" class="markerpoint"></use>

我有一个悬停功能，可以在悬停时转换 .markerpoint 类元素：-

$('.markerpoint').hover(
    function() 
      var mySnapElement = Snap(this);
      mySnapElement.transform('s1.5');
    
    function() 
      mySnapElement.transform('s1');
    
)

Transform 适用于 svg 的其他元素，例如 或 但会为 标签

错误响应数据：-

snap.svg.js:2786 Uncaught TypeError: Cannot read properties of null (reading 'substring')
    at Element.elproto.getBBox (snap.svg.js:2786)
    at extractTransform (snap.svg.js:2834)
    at Element.elproto.transform (snap.svg.js:2896)
    at SVGUseElement.<anonymous> (main.js:1023)
    at SVGUseElement.handle (jquery.min.js:2)
    at SVGUseElement.dispatch (jquery.min.js:2)
    at SVGUseElement.v.handle (jquery.min.js:2)

好像是 Snap.svg 处理>

的局限

寻找技巧或前进方向的建议

【问题讨论】：

@RobertLongson 谢谢！你正确地指出了它。现在将鼠标悬停在 上不会引发错误，但在对其进行转换时，除了将其大小缩放到 1.5 之外，它还在 x 和 y 中转换 。因此 不会放大其自己的位置。例如，将鼠标悬停在 上会产生类似矩阵 (1.5,0,0,1.5,-226.3881,-340.458) 的矩阵，但悬停在 上会产生此矩阵 (1.5,0,0,1.5,0,0)。 缺少 e、f 校正是罪魁祸首。不知道问题出在哪里。任何帮助将不胜感激。

虽然我通过替换 mySnapElement.transform('s1.5'); 已经达到了预期的效果；使用 var rmatx=mySnapElement.transform().localMatrix.scale(1.5, 1.5, [cx], [cy]); mySnapElement.transform(rmatx);但如果你愿意，那么可以告诉为什么 mySnapElement.transform('s1.5');失败了。

【参考方案1】：

快速浏览the source code 似乎 Snap.svg 不支持裸 href 但需要您使用 xlink:href

href 的使用在 SVG 2 中是新的，SVG 1.1 只是 xlink:href。