无法将带有SnapSVG的元素添加到我的页面 [英] Can't add elements with SnapSVG to my Page
问题描述
因此，我正在使用SnapSVG来操纵(动画)我使用Inkscape创建的SVG文件.像矩形或圆形这样的不同元素的动画效果很好.我遇到的问题是，当我尝试使用SnapSVG代码尝试添加一个新元素(如矩形)时，它不起作用，整个屏幕为空白(所有内容消失了).为什么会有这个问题?甚至可以通过SnapSVG向现有的SVG文件添加新元素吗?
So I am using SnapSVG to manipulate (animate) my SVG File that i created with Inkscape. The animating of the different elements like a rectangle or circle is working completely fine. The problem that i have is when i try to add a new element like a rectangle with SnapSVG code it does not work and the whole screen is blank (everything disappears). Why do i have this problem? Is it even possible to add a new element with SnapSVG to a existing SVG File?
下面，我向您展示了一些有关如何操作SVG以及如何将其显示在页面上的DIV中的代码.我还向您展示了我如何尝试使用SnapSVG添加新元素
Down below i showed you some code on how i manipulate the SVG and how it gets displayed in a DIV on my Page. And I am also showing you how I am trying to add a new Element with SnapSVG
我几乎尝试了所有事情.我可以将新Element的代码放在已经存在的SVG的代码之外，但是它总是出现在SVG文件的外部.
I tried almost everything. I can put the code for the new Element outside of the code for the already existing SVG but then it always appears outside of the SVG file.
<head>
<meta charset="utf-8">
<title>Inkscape Animated Icon Snap</title>
<!--We need to add the Snap.svg script to our document-->
<script src="snap.svg.js"></script>
<script>
//Run script right away
window.onload = function () {
//We'll be appending the icon to this DIV later
var s = Snap("#svgDiv");
//Have Snap load the SVG file
Snap.load("icon.svg", function(f) {
s.append(f);
//Assign the white rectangle
whiteRect = f.select("#whiteRect");
//Assign the whole icon group
icon = f.select("#icon");
//When the icon is hovered over, have the white rectangle move up slightly with elastic properties
icon.hover(function() {
whiteRect.animate({y:18}, 500, mina.elastic);
},
//And return to original position when not hovered over
function() {
whiteRect.animate({y:23.984177}, 500, mina.elastic);
}
);
var bigCircle = s.circle(0, 0, 20).attr({fill: 'green' });
icon.append(bigCircle);
//Finally append the icon to iconDiv in the body
});
};
</script>
</head>
<body>
<!--Here's the DIV that will hold the animated SVG icon-->
<svg id="svgDiv"></svg>
</body>
因此，基本上，我想要的只是添加到我的SVG文件中的另一个矩形.我得到的是空白页.
So basically what I want as a result is just another rectangle added to my SVG File. What i get is a blank Page.
推荐答案
想到了2个主要问题(如果没有html/svg，也很难确定).
2 main things spring to mind (hard to be sure without the html/svg as well).
首先，必须在SVG元素而不是HTML元素上调用Snap，因此当我看到此行时...
Firstly, you Snap must be called on an SVG element, not an HTML element, so when I see this line...
var s = Snap("#iconDiv");
几乎可以肯定是错误的.它不能是div或任何HTML元素. Snap适用于SVG元素，
it's almost certainly wrong. It cannot be a div, or any HTML element. Snap works on SVG elements,
var s = Snap("#anSVGselement");
是需要的.
第二，你的台词
s.append(f);
想在Snap.load()之后变直
Wants to be straight after the Snap.load()
Snap.load("icon.svg", function(f) {
// stuff here probably won't work, there are some minimal methods like select, but not like hover etc
s.append(f);
//do stuff now it's appended
var icon = s.select("#icon");
var bigCircle = s.circle(10, 970, 20);
icon.append(bigCircle);
});
问题是，此时f仅是一个片段，在DOM中尚无位置，因此直到您将append添加到DOM中之后，"hover"等方法才可用.附加后，这些方法将可用.在附加之前，有一些可用的方法，例如select(这样，您可能"可以从片段中选择一个元素，然后附加该元素，而不是附加我认为的所有内容).
The problem is, f is just a fragment at this point, it has no place in the DOM yet, so methods like 'hover' etc, aren't available until you have added with append into the DOM. Once it's appended these methods become available. There are a few methods available like select, before it's appended (so you 'may' be able to select an element from the fragment and then append that, rather than appending everything I think).
还请注意，icon.svg文件具有一些变换，因此您将需要像我的示例中那样调整圆以具有正确的cx/cy，或添加一个匹配的变换(或从原始svg并具有正确的cx/cy)
Also note, the icon.svg file has some transforms on it, so you will need to adjust the circle to have the correct cx/cy like in my example, or add a transform to match (or remove the transforms from the original svg and have correct cx/cy)
这篇关于无法将带有SnapSVG的元素添加到我的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
