Question

我想在SVG图像中隐藏文本，除非图像被放大。由于previous iteration of this answer尚未在大多数浏览器中实现，因此在此方案中是否存在使用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; }
    }

Answer 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>

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

1 个答案: