如何结合父级SVG，子级SVG，PNG和工具提示？

如何解决如何结合父级SVG，子级SVG，PNG和工具提示？

有一个要向其添加工具提示的独立SVG（独立含义：它不在HTML文档中，不受SVG外部样式的控制）。

SVG将与其他类似类型的SVG（基于数据库查询）一起注入HTML。例如，SVG将在表格单元格中“居中显示”。例如，该表将有5列和4行（总共20个SVG）

这是我到目前为止所拥有的：

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 300 200"
  id="tooltip-svg-1"
>
<style>
  #tooltip {dominant-baseline: hanging;}
</style>

<rect x="-20" y="10" width="80" height="80" fill="#007bbf" class="tooltip-trigger" data-tooltip-text="Short-text"/>

<g id="tooltip" visibility="hidden" >
<rect x="2" y="2" width="80" height="24" fill="black" opacity="0.4" rx="2" ry="2"/>
<rect width="80" height="24" fill="white" rx="2" ry="2"/>
<text x="3" y="6">Tooltip</text>
</g>

<script type="text/ecmascript"><![CDATA[
    (function() {
      var svg = document.getElementById('tooltip-svg-1');
      var tooltip = svg.getElementById('tooltip');
      var tooltipText = tooltip.getElementsByTagName('text')[0].firstChild;
      var triggers = svg.getElementsByClassName('tooltip-trigger');

      for (var i = 0; i < triggers.length; i++) {
        triggers[i].addEventListener('mousemove',showTooltip);
        triggers[i].addEventListener('mouseout',hideTooltip);
      }

      function showTooltip(evt) {
        var CTM = svg.getScreenCTM();
        var x = (evt.clientX - CTM.e + 6) / CTM.a;
        var y = (evt.clientY - CTM.f + 20) / CTM.d;
        tooltip.setAttributeNS(null,"transform","translate(" + x + " " + y + ")");
        tooltip.setAttributeNS(null,"visibility","visible");
        tooltipText.data = evt.target.getAttributeNS(null,"data-tooltip-text");
      }

      function hideTooltip(evt) {
        tooltip.setAttributeNS(null,"hidden");
      }
    })()
]]>
</script>
</svg>

现在想在SVG的中心添加一个PNG

已将xmlns:xlink="http://www.w3.org/1999/xlink"添加到SVG标头中。

然后按如下所示注入一个子SVG：

<svg viewBox="0 0 760 760" x="-34" y="15">
<image xlink:href="http://lorempixel.com/output/city-q-c-256-256-5.jpg" width="256px" height="256px"/>
</svg>

这是实现：

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 300 200"
  id="tooltip-svg-2"
>

<style>
  #tooltip {dominant-baseline: hanging;}
</style>

<defs>
<radialGradient id="RadialGradient-1" cx="0.5" cy="0.5" r="2">
<stop offset="0.00" style="stop-color:#ffffff; stop-opacity:1;" />
<stop offset="1.00" style="stop-color:#696969; stop-opacity:1;" />
</radialGradient>
</defs>

<rect
  style="fill:url(#RadialGradient-1)"
  rx="10"
  ry="10"
  x="10"
  y="10"
  width="80"
  height="80"
  class="tooltip-trigger"
  data-tooltip-text="label with several words"
/>

<svg viewBox="0 0 760 760" x="-34" y="15">
<image xlink:href="http://lorempixel.com/output/city-q-c-256-256-5.jpg" width="256px" height="256px"/>
</svg>

<g id="tooltip" visibility="hidden" >
<rect x="2" y="2" width="200" height="24" fill="black" opacity="0.4" rx="2" ry="2"/>
<rect width="200" height="24" fill="white" rx="2" ry="2"/>
<text x="3" y="6">Tooltip</text>
</g>

<script type="text/ecmascript">
<![CDATA[
    (function() {
      var svg = document.getElementById('tooltip-svg-2');
      var tooltip = svg.getElementById('tooltip');
      var tooltipText = tooltip.getElementsByTagName('text')[0].firstChild;
      var triggers = svg.getElementsByClassName('tooltip-trigger');
      for (var i = 0; i< triggers.length; i++) {
        triggers[i].addEventListener('mousemove',"hidden");
      }
    })()
]]>
</script>
</svg>

所有PNG的尺寸均相同：width="256px" height="256"px

所有SVG <rect>具有相同的尺寸：width="80" height="80"

但是有两个问题：

1，如您所见，我已经割裂了子SVG viewBox和x,y coordinates以将PNG放置在父SVG中。

2工具提示不会悬停在PNG附加项（子SVG）上；它仅显示在父级SVG的边框上。

有两个问题：

1如何正确配置/关联子SVG（包含PNG）到父SVG（矩形）？换句话说，如何系统地结合两者（子SVG的位置相对于父SVG的位置），而不是相对于手动调整子相对于父级的hack的东西？

2如何修改<g id="tooltip">定义工具提示，以便将鼠标悬停在子SVG（带有PNG）和父SVG上时可以看到文本？