Question

如何在javascript中隐藏内联svg中的任何图像？

例如：<svg>.... <image src='...'> </svg>

这样做的目的是当我使用drawImage（）将svg绘制到画布时，避免IE中出现下面的X框。

enter image description here

Answer 1

如果您正在使用jQuery，并且只有一个svg标记，则可以使用hide（）函数：

$（＆＃34;＆SVG GT;图像＆＃34）隐藏（）;

Answer 2

仅使用JavaScript的简单示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>

    <svg id="mySvg" width="60" height="60">
        <image id="img1" x="0" y="0" width="60" height="60" xlink:href="some.svg">
    </svg>
    <br />
    <input id="showButton" type="button" onclick="show()" value="Show" />
    <input id="hideButton" type="button" onclick="hide()" value="Hide" />

    <script language="JavaScript">
      show = function(){
        var img = document.getElementById("img1");
        img.style.display = "";
      }

      hide = function(){
        var img = document.getElementById("img1");
        img.style.display = "none";
      }   
    </script>

    </body>
</html>

隐藏svg标记内的所有图像

2 个答案: