css - 如何通过透明 SVG 对象单击到它覆盖的 SVG 对象？

Question

我有一个 Windows 应用程序(无源代码)，它允许您将模板 (SVG) 导入 SQL 数据库。从那里，应用程序让您将它们插入绘图表面。您可以在彼此之上放置多个模板层。如果有任何透明度，您应该能够单击以选择下面的模板。

有一个经常运行的存储过程，它根据特定条件为不同版本更改模板。我遇到过从一个模板的高度/宽度到另一个模板的变形问题，以及插入的模板没有居中于它正在分层的模板上。

我必须找到解决这两个问题的方法。我想出的可能不是正确的方法，但我不是 SVG 大师。只是在模板中设置根 svg 对象的高度和宽度并没有解决任何问题，所以我添加了(我认为是)透明填充的 rect 并设置它的高度和宽度与根 svg 对象的值相同。这样，无论存储过程切换到什么，模板都可以保证居中。

一切看起来都很棒，我以为我完成了。但是，即使我将 rect 设置为 fill:none;stroke:none;stroke-width:0;，固定宽度创建了一个具有可点击空白区域的矩形;您无法单击该模板下方的任何内容。

我需要做什么才能真正使模板在调整大小时尊重其高度和宽度，同时允许单击“透明”空白区域以选择下面的模板？

CodePen

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" 
     width="60" viewBox="0 0 60 30" preserveAspectRatio="xMidYMid meet">

  <style type="text/css">
  <![CDATA[
    .st1 {fill:none;stroke:#0000ff;stroke-dasharray:1.2,2.4;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2}
    .st2 {fill:none;stroke:none;stroke-width:0;}
  ]]>
  </style>

  <g>
    <rect class="st2" height="30" width="60" x="0" y="0" />
  </g>

  <g>
    <path class="st1" d="m 20,15 a 10,10 0 1 1 20,0 10,10 0 1 1 -20,0 z" />
  </g>

</svg>

附言我似乎不得不使用 path 而不是 circle，因为应用程序不能很好地处理新版本的 SVG。

Answer 1

我在 SVG 上什至最差，但会 pointer-events:none为你工作？这将使该元素不接受任何鼠标事件:单击、悬停等。