根据缩放级别显示或隐藏 SVG 元素答案

【问题标题】：Show or hide SVG elements based on zoom level根据缩放级别显示或隐藏 SVG 元素
【发布时间】：2016-06-11 21:27:50
【问题描述】：

我想隐藏 SVG 图像中的文本，除非图像被放大。由于min-zoom attribute 尚未在大多数浏览器中实现，在这种情况下是否有使用 CSS、Javascript、SVG 特定或任何其他方法的解决方法

这是我正在尝试做的（但目前不会工作，因为 min-zoom 属性在大多数浏览器中都不可用：

<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; }
    }

【问题讨论】：

根据缩放值在 javascript 中更改可见性或显示 CSS 属性
@RobertLongson，感谢您的提示。

标签： javascript jquery css svg

【解决方案1】：

我设法使用 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>

【讨论】：