Question

我有SVG文件，它由多个链接组成。用户点击链接后，页面应显示结果。

SVG文件包含不同的遗传信息，需要显示多个结果。

Onclick我需要调用JavaScript函数来处理结果。但是javascript：myfunction（）;单击SVG文件时不调用。请提出任何替代解决方案或任何解决方法。

我认为问题不是很明确。更新信息

我有SVG文件。将其保存为系统中的mysvg.svg文件。

<svg>
        <g id="US">
                <rect x='10' y='10' fill='#000000' height='100' width='100'></rect>
        </g>
        <g id="CA">
                <rect x='150' y='10' fill='#0000FF' height='100' width='100'></rect>
        </g>
    <a xlink:href="#crisp"> 
            <rect x="10" y="10" width="164.05078125" style="fill:none; stroke:none" height="100" pointer-events="fill" />
    </a>
</svg>

我的HTML文件。

    $(document).ready(function () {
            $("a").click(function() {
               alert('hi');
            }); 
        loadSVGasXML();     
    });

    function loadSVGasXML() {
        var SVGFile="myfile.svg"

        var loadXML = new XMLHttpRequest();
        function handler(){

            var svgDiv = document.all.svgDiv;
            if(loadXML.readyState == 4 && loadXML.status == 0) {            
                    var xmlString=loadXML.responseText
                    svgDiv.innerHTML=xmlString              
                    fitSVGinDiv()           
            }
        }
        if (loadXML != null) {
            loadXML.open("GET", SVGFile, true);
            loadXML.onreadystatechange = handler;
            loadXML.send();
        }
    }

    function fitSVGinDiv(){
        var divWH=60

        var mySVG=document.getElementsByTagName("svg")[0]

        var bb=mySVG.getBBox()
        var bbw=bb.width
        var bbh=bb.height

        //--use greater of bbw vs bbh--
        if(bbw>=bbh)
        var factor=bbw/divWH
        else
        var factor=bbh/divWH

        var vbWH=divWH*factor

        var vbX=(bbw-vbWH)/2
        var vbY=(bbh-vbWH)/2

        mySVG.setAttribute("viewBox",vbX+" "+vbY+" "+vbWH+" "+vbWH)

        mySVG.setAttribute("width","100%")
        mySVG.setAttribute("height","100%")
    }
    </script>
    <body>
    <!--<a href="#crisp"> hi </a>-->
    <div id="svgDiv">
    </div>
    <br>
    <br>

        <a id="crisp"> hello</a>
    </div>
    </body>
    </html>`

请添加更多内容，使其看起来好像是长页面。我想在我的svg文件中捕获锚标记的onclick函数

Answer 1

这里发生了不同的事情。首先解决您的问题：

<script language="JavaScript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script language="JavaScript">

$(document).ready(function () {
    loadSVGasXML();     
});

function loadSVGasXML() {
    var SVGFile="myfile.svg";

    var loadXML = new XMLHttpRequest();
    function handler(){

        var svgDiv = document.getElementById("svgDiv");
        if(loadXML.readyState == 4 && loadXML.status == 200) {            
            var xmlString=loadXML.responseText;
            svgDiv.innerHTML=xmlString;
            $("a").click(function() {
               alert('hi');
            });            
            fitSVGinDiv();        
        }
    }
    if (loadXML != null) {
        loadXML.open("GET", SVGFile, true);
        loadXML.onreadystatechange = handler;
        loadXML.send();
    }
}

function fitSVGinDiv(){
    var divWH=60;

    var mySVG=document.getElementsByTagName("svg")[0];

    var bb=mySVG.getBBox();
    var bbw=bb.width;
    var bbh=bb.height;

    //--use greater of bbw vs bbh--
    if(bbw>=bbh)
        var factor=bbw/divWH;
    else
        var factor=bbh/divWH;

    var vbWH=divWH*factor;

    var vbX=(bbw-vbWH)/2;
    var vbY=(bbh-vbWH)/2;

    mySVG.setAttribute("viewBox",vbX+" "+vbY+" "+vbWH+" "+vbWH);

    mySVG.setAttribute("width","100%");
    mySVG.setAttribute("height","100%");
}
</script>

<!--<a href="#crisp"> hi </a>-->
<div id="svgDiv">
</div>
<br>
<br>
  <a id="crisp"> hello</a>
</div>

现在解释：

    $("a").click(function() {
       alert('hi');
    });

它的功能越来越少，就是要立即查找您网络中的所有<a> html元素，并将onclick事件与他们绑定，以便向所有人说“嗨”。

在beging没有svg，所以没有“a”元素，你做绑定。然后由loadSVGasXML();加载svg并更改html内容。添加了新标签。但是，在绑定事件宽度$("a").click(function() {alert('hi'});之后，此标记将附加到网页，因此这些新的onclick事件尚未绑定。因此，您需要做的是在加载所有内容后动态更改Web内容时使事件绑定。所以你需要将绑定放在处理程序回调函数中。

其次，您使用旧方式获取DOM。 document.all.svgDiv它可以追溯到罗马帝国之前的黑暗时期（只是开玩笑），在那里开发与网络相关的任何东西都是屁股的痛苦。在那些可怜的时代，每个浏览器都有自己的方式来访问DOM。在我们的情况下，这是很久以前用于访问IE中的DOM对象的方式。幸运的是，现在一切都变得更好，并且有更好的方法来访问所有浏览器都支持的DOM。如果你想使用原始javascript通过id访问DOM元素，我建议你总是使用document.getElementById("svgDiv");。

最后是loadXML.status。请求成功后，状态为200而不是0。

可能那些持续时间，你可能已经知道它，只是一个副本＆amp;粘贴错误。只是指着它。希望这可能对您有所帮助。

从SVG文件调用javascript函数

1 个答案: