两个子组件之间缺少svg光标指针

Question

@namespace svgns url(http://www.w3.org/2000/svg);
html,body,svg { height:100% }/* As SVG does not provide a default visual style for links,
it's considered best practice to add some */
@namespace svgns url(http://www.w3.org/2000/svg);
svgns|a {
cursor: pointer;
}
svgns|a text {
fill: blue; /* Even for text, SVG use fill over color */
text-decoration: underline;
}
svgns|a:hover, svgns|a:active {
outline: dotted 1px blue;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  <!-- A link around a text -->
  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
<g style="cursor: pointer">
<image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>
    <text x="50" y="90" text-anchor="middle">
      &lt;circle&gt;
    </text>
</g>
  </a>
</svg>

我有一个SVG，它包含动画和文本。SVGhas风格的CCD_ 1。当我把鼠标悬停在图像上时，我可以用光标指针指向文本。但如果我把鼠标悬停在图像和文本之间的空间上，我就会失去"手"。有什么办法可以给我吗？

谢谢你的帮助。

示例

enter code here

Answer 1

如果这是svg中的所有内容，则可以将cursor: pointer应用于整个svg元素。否则，您可以在image:之前添加一个简单的rect

<rect x="0" y="0" width="100" height="100" fill="transparent" />

由于g元素不能直接设置样式，因为样式仅适用于嵌套元素，但rect可以(也可以作为g的嵌套元素(。

@namespace svgns url(http://www.w3.org/2000/svg);
html,
body,
svg {
height: 100%
}
/* As SVG does not provide a default visual style for links,
it's considered best practice to add some */
svgns|a {
cursor: pointer;
}
svgns|a text {
fill: blue;
/* Even for text, SVG use fill over color */
text-decoration: underline;
}
svgns|a:hover,
svgns|a:active {
outline: dotted 1px blue;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  <!-- A link around a text -->
  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
<rect x="0" y="0" width="100" height="100" fill="transparent" />
<image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>
    <text x="50" y="90" text-anchor="middle">
      &lt;circle&gt;
    </text>
  </a>
</svg>