Question

请注意，当我的svg代码内联我的HTML文件时，我不会收到此错误。我需要在我的HTML中使用许多svg文件，因此将它们全部放在一个文件中会非常不方便。

在我的一个JavaScript函数中，这是我使用的代码：

var svgT = Snap("#redBar");
var line = svgT.select("#line");  // exception occurs here

以下是svg代码，供其自己的文件参考：

<svg version="1.1" id="redBar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 113.9 3.7" style="enable-background:new 0 0 113.9 3.7;" xml:space="preserve">
<style type="text/css">
    .st0{fill:url(#SVGID_1_);}
</style>
<g id="line">

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.239177e-04" y1="29.3381" x2="113.9399" y2="29.3381" gradientTransform="matrix(1 0 0 1.3293 0 -37.1699)">
        <stop  offset="1.075269e-02" style="stop-color:#EC1C24"/>
        <stop  offset="0.1548" style="stop-color:#EC2026"/>
        <stop  offset="0.2961" style="stop-color:#ED2C2A"/>
        <stop  offset="0.436" style="stop-color:#EE3F32"/>
        <stop  offset="0.5" style="stop-color:#EF4B37"/>
        <stop  offset="0.5483" style="stop-color:#EE4334"/>
        <stop  offset="0.7058" style="stop-color:#ED2D2B"/>
        <stop  offset="0.8586" style="stop-color:#EC2026"/>
        <stop  offset="1" style="stop-color:#EC1C24"/>
    </linearGradient>
    <path class="st0" d="M113,3.7H1c-0.5,0-1-0.4-1-1L0,1c0-0.5,0.4-1,1-1l112,0c0.5,0,1,0.4,1,1v1.7C113.9,3.2,113.5,3.7,113,3.7z"/>
</g>
</svg>

现在，当我在JavaScript中运行该函数来选择组元素（#line）时，我得到以下异常： Uncaught TypeError: Cannot read property of 'select' of null

似乎我必须做其他事情才能从svg中正确读取元素。

有没有人处理过使用Snap.svg操作svg文件，可以给我一些关于其他东西的提示？

编辑：

我也尝试在windows onload函数上使用Snap.load()。

var svgT;
var line;
window.onload = function() {
    Snap.load("/svg/RedBar-01.svg", function (f) {
        var g = f.select("g");
        svgT = Snap("#redBar");
        line = svgT.select("#line");
    });

我在加载后尝试使用Snap.animate()按钮点击：

line.animate({
                fill: "pink",
                transform: 't0,0'
            }, 1000);

此时我似乎无法从.animate（）函数获得任何响应。

编辑2：

我目前的JS代码：

window.onload = function() {
    Snap.load("/svg/RedBar-01.svg", function (f) {
        var s = Snap(800,800);
        s.append(f);
        var l = Snap("#redBar");

        var line = l.select("#line");
        line.animate({
                fill: "pink",
                transform: 't0,0'
            }, 1000);
    });

Answer 1

确保附加（）加载的svg片段f。

一般格式是

var s = Snap(800,800); // or Snap('#mySvg') an existing svg element, not a div

Snap.load( filename, function( fragment ) {
    s.append( f ); //add the loaded svg fragment into the DOM
    var element = s.select('#myId');
    element.animate(....)
});

还要确保没有一些css样式取代svg属性。

使用Snap.Select时SVG Uncaught TypeError

1 个答案: