javascript - 如何在页面中多次使用一个 SVG 文件
问题描述
我有简单的猫头鹰旋转木马 -
<div id="header-slider" class="owl-carousel owl-theme">
<div class="single_slide" data-dot='<button role="button" class="owl-dot"></button><?php include("inc/chart3.svg")?>'>
<img src="assets/images/banner.jpg" alt="" title="">
</div>
<div class="single_slide" data-dot='<button role="button" class="owl-dot"></button><?php include("inc/chart3.svg")?>'>
<img src="assets/images/banner.jpg" alt="" title="">
</div>
</div>
我正在尝试包含 svg 文件(inc/chart3.svg)而不是普通点。问题是,只加载了一个文件,其他文件不会显示。设置类“活动”时,有什么方法可以显示每个 svg 文件并启动他的动画?
SVG有这个代码:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16" height="16" viewbox="0 0 250 250" enable-background="new 0 0
426.667 410" xml:space="preserve">
<path class="kruznice" transform="translate(125, 125) scale(.84)"/>
</svg>
<script>
jQuery(document).ready(function() {
var kruznice = document.querySelector(".kruznice")
, a = 0
, p = Math.PI
, t = 2;
(function draw() {
a++;
a %= 360;
var r = ( a * p / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( a > 180 ) ? 1 : 0
, anim = "M 0 0 v -125 A 125 125 1 "
+ mid + " 1 "
+ x + " "
+ y + " z";
kruznice.setAttribute( "d", anim );
setTimeout(draw, t); // Redraw
})();});
</script>
解决方案
您可以同时加载它们,这不是问题。
问题是querySelector
只返回一个元素,因此您的脚本只应用于一个SVG
元素。
改为使用getElementsByClassName
(返回对象列表),然后使用Object.values()
获取每个 SVG 元素,然后应用您的属性来运行动画。
$(document).ready(function() {
var kruznice = document.getElementsByClassName("kruznice"),
a = 0,
p = Math.PI,
t = 2;
(function draw() {
a++;
a %= 360;
var r = (a * p / 180),
x = Math.sin(r) * 125,
y = Math.cos(r) * -125,
mid = (a > 180) ? 1 : 0,
anim = "M 0 0 v -125 A 125 125 1 " +
mid + " 1 " +
x + " " +
y + " z";
Object.values(kruznice).forEach(item=>item.setAttribute("d", anim));
setTimeout(draw, t); // Redraw
})();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16" height="16" viewbox="0 0 250 250" enable-background="new 0 0
426.667 410" xml:space="preserve">
<path class="kruznice" transform="translate(125, 125) scale(.84)"/>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16" height="16" viewbox="0 0 250 250" enable-background="new 0 0
426.667 410" xml:space="preserve">
<path class="kruznice" transform="translate(125, 125) scale(.84)"/>
</svg>
推荐阅读
- sas - proc报告中跨变量拆分的变量的不同标签
- c++ - 将 2 个 openssl 与 libcurl 链接时:错误设置证书验证位置
- ios - 是否可以检测附近没有我的应用的 iOS 设备?
- c# - 有没有办法将本地数据库与 Azure 上托管的 ASP.NET 核心 Web 应用程序一起使用?
- javascript - Threejs - 动画 fjdxsu 的公式
- sql - 如何连接两列,其中表 A 的日期介于 Oracle SQL 中表 B 的日期之间?
- dataframe - 如何连接具有列值的表
- powerbi - 每天查找最早和最晚的时间戳,创建计算列,中间有时间
- node.js - 发布获取缩放 oauth2.0 令牌的请求导致 403 错误
- r - Kmeans 聚类数据存储/绘图