代码之家 › 专栏 › 技术社区 › Jay Gray

如何组合父SVG、子SVG、PNG和工具提示?

svg javascript

Jay Gray · 技术社区 · 4 年前

有一个独立的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, "visibility", "hidden");
      }
    })()
]]>
</script>
</svg>

现在想在SVG的中心包含一个PNG

xmlns:xlink="http://www.w3.org/1999/xlink" 到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', 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, "visibility", "hidden");
      }
    })()
]]>
</script>
</svg>

width="256px" height="256"px

所有SVG <rect> 尺寸相同: width="80" height="80"

但有两个问题:

viewBox 和 x,y coordinates 在父SVG中定位PNG。

有两个问题:

1如何 适当地

2如何修改 <g id="tooltip"> 定义工具提示,使文本在悬停在子SVG(包含PNG)和父SVG上时可见?

0 回复 | 直到 4 年前