我有一个名为ggplot(data = earnings_returns, aes(x=factor(date), y=return, fill=factor(sign(return)))) +
geom_col(show.legend = FALSE) +
ggtitle(paste(ticker, 'Returns', 5, 'Day(s) After Announcement'))+
scale_fill_brewer(palette="Set1") +
theme(plot.title = element_text(hjust = 0.5),
axis.text.x = element_text(angle = 90))
的HTML文件，如下所示。
index.html和一个名为<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
path {
fill: none;
stroke: black;
stroke-width: 3;
}
</style>
</head>
<body>
<object type="image/svg+xml" data="test.svg"></object>
<img src="test.svg" />
<p><button class="animate">Animate</button></p>
<script>
(function () {
var button = document.querySelector('.animate');
button.onclick = function (event) {
var paths = document.querySelectorAll('path');
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition = 'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out ' + (2 * i) + 's';
// Go!
path.style.strokeDashoffset = '0';
}
};
}());
</script>
</body>
</html>
的SVG文件，如下所示。
test.svg我在Chrome上查看了<svg width="100" height="100" viewBox="0 0 100 100">
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" />
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" />
<path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0" />
<path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29" />
<path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" />
<path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82" />
</svg>
，但动画不起作用。这两个文件都在同一目录中。
为已加载的SVG设置动画的正确方法是什么？请注意，当将SVG复制并作为嵌入式SVG粘贴到HTML文件时，我可以设置动画。
答案 0 :(得分：3)
您有2个文档（html文档和对象文档），因此需要将其视为此类文档。一个文档中的样式不适用于另一文档，所以...
首先，我们定义svg命名空间，然后将路径样式移动到test.svg文件，以便成为
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<style>
path {
fill: none;
stroke: black;
stroke-width: 3;
}
</style>
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" />
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" />
<path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0" />
<path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29" />
<path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" />
<path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82" />
</svg>
然后，我们需要更改动画代码以提取对象的文档。请注意，我们无法使用img元素执行此操作，因此我已将其删除。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<object type="image/svg+xml" data="test.svg"></object>
<p><button class="animate">Animate</button></p>
<script>
(function () {
var button = document.querySelector('.animate');
button.onclick = function (event) {
var object = document.querySelector("object");
var doc = object.contentDocument;
var paths = doc.querySelectorAll('path');
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition = 'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out ' + (2 * i) + 's';
// Go!
path.style.strokeDashoffset = '0';
}
};
}());
</script>
</body>
</html>
答案 1 :(得分：0)
正如您提到的，svg可以正常工作，因此只要您的文件名+目录正确，就可以对其进行动画处理。
var paths = document.querySelectorAll('path');
var button = document.querySelector('.animate');
button.onclick = function() {
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition = 'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out ' + (2 * i) + 's';
// Go!
path.style.strokeDashoffset = '0';
}
}path {
fill: none;
stroke: black;
stroke-width: 3;
}<p><button class="animate">Animate</button></p>
<svg width="100" height="100" viewBox="0 0 100 100">
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" />
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" />
<path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0" />
<path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29" />
<path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" />
<path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82" />
</svg>