根據縮放級別顯示或隱藏SVG元素

我想隱藏SVG圖像中的文本，除非圖像被放大。由於min-zoom attribute尚未在大多數瀏覽器中實現，因此在此場景中是否有解決方法CSS，Javascript代碼，SVG特定或任何其他方法根據縮放級別顯示或隱藏SVG元素

這是目前我所試圖做的（但不會工作作爲最小變焦屬性不可用在大多數的瀏覽器：

<svg width="400" height="200"> 
    <rect width="300" height="100" style="fill:white;stroke-width:3;stroke:black" /> 
    <text class="mytext" x="100" y="55" fill="black" display="none">I love SVG!</text> 
</svg>

CSS

@media screen and (min-zoom: 2) 
    {.mytext{ display: inline; } 
    }

來源

2016-02-28 Jose Cherian

阿爾特採取根據變焦值 –

@RobertLongson在JavaScript的可見性或顯示CSS屬性，謝謝你的提示。 –

我設法找到了一個解決方案，使用jQuery。下面例子將顯示的文本，如果瀏覽器的縮放等級是至少2

變焦檢測的代碼是從這個link

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    </head> 
    <body> 

    <svg width="400" height="200" > 
     <rect width="300" height="100" style="fill:white;stroke-width:3;stroke:black" /> 
     <text id="mytext" x="100" y="55" fill="black" display="none">I love SVG!</text> 
    </svg> 
    <iframe id="frame" style="display:none;"> </iframe> 
    <script type="text/javascript"> 
     var elFrame = $('#frame')[0]; 
     $(elFrame.contentWindow).resize(function() { 
      $(window).trigger('zoom'); 
     }); 
     $(window).on('zoom', function() { 
      console.log('zoom', window.devicePixelRatio); 
      if(window.devicePixelRatio >= 2) { 
      $('#mytext').attr("display","inline"); 
      }else{ 
      $('#mytext').attr("display","none"); 
      } 
     }); 
    </script> 
    </body> 
</html>

來源

2016-03-01 11:09:20

根據縮放級別顯示或隱藏SVG元素

回答

相關問題