使用 Snap.Select 时 SVG 未捕获类型错误
SVG Uncaught TypeError when using Snap.Select
请注意,当我将我的 svg 代码内联到我的 HTML 文件时,我不会收到此错误。
我有很多 svg 文件需要在我的 HTML 中使用,所以将它们全部放在一个文件中会非常不方便。
在我的一个 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 到 select 组元素 (#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);
});
确保你 append() 已加载的 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 属性。
请注意,当我将我的 svg 代码内联到我的 HTML 文件时,我不会收到此错误。 我有很多 svg 文件需要在我的 HTML 中使用,所以将它们全部放在一个文件中会非常不方便。
在我的一个 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 到 select 组元素 (#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);
});
确保你 append() 已加载的 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 属性。