在SVG中使用Javascript
发表于|更新于|瞎研究
|浏览量:
最近研究SVG图,发现可以使用javascript
。但SVG是XML,直接在里面写javascript
会报错。
你需要加一个,不让XML解析的标识:<![CDATA[ ]]>
。
1 | <svg> |
以上类似的教程网上有不少,我主要想说:
有一点需要注意,这种js无法在<img>
或background-image
引用的时候运行,也就是如果SVG是个时钟,js控制着时分秒针的运动,那么这张SVG图被当做图片引用会变成一张静态图片。
文章作者: imba久期
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 怠惰のコエ - imba久期 BLOG!
相关推荐
2019-08-30
Chrome插件跨域请求
Chrome插件中,可以跨域的地方只有background js和popup js这两个地方,popup js是右上角那个弹出页,只有弹出的时候才有效,所以定义跨域监听大概不现实 这样只能在background js,我们需要在background js中定义一个监听函数,来监听其他页面传过来的信息。根据传来的值,判断是否是API请求 下面是一个有get和post的简易解决方案 1234567891011121314151617181920212223242526272829chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { switch(request.type) { case 'get': fetch(request.url) .then(function(response) { return response.json() }) .then(function(json) {...
2019-09-16
dateMaker.js
这是about页面中用到的一个js程序,可以根据一个起始日期计算距离当前的差值,精确到毫秒。 程序本体:由一个dateMaker获取数据函数和一个time_valide日期格式化函数组成 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475function dateMaker(id) { var dom = document.querySelector('#'+id); // 计时器间隔 var interval_time = dom.getAttribute('interval-time') !== null ? parseInt(dom.getAttribute('interval-time')) : 1000; // 额外添加的时间,逗号隔开 var plus_time =...
2020-05-31
JS啊啊啊啊啊啊啊啊啊
...
2020-06-12
一键英译中
服务端如果到时候用的人多了我可能会停掉。 以下源码,可自行复制放在自己的服务器上,再把上面javascript中的https://bili.imba97.cn/translate.php改成你的。 12345678910111213141516171819202122232425<?phpheader('content-type:application/json;charset=utf-8');header('Access-Control-Allow-Origin: *');function curlRequest($ipUrl) { $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $ipUrl); curl_setopt($curl, CURLOPT_HEADER, 0); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl,...
2020-04-22
快速扭蛋工具
这个工具可以帮你快速自动开扭蛋,每0.2秒执行一次,只支持普通扭蛋。梦幻扭蛋也能快速开,但需要获取到一个活动ID,这个没法自动获取,需要再研究 使用方法第一种方式,直接把下面这个拖到收藏夹。然后在直播页面点击使用 快速扭蛋 第二种方式,复制以下javascript代码,在浏览器收藏夹右键->添加网页->起个名字->在网址里粘贴代码 1javascript:if($('#quickOpenCapsule_messageBox').length==0){function getCookie(name){var arr,reg=new RegExp('(^| )'+name+'=([^;]*)(;|$)');if(arr=document.cookie.match(reg))return unescape(arr[2]);else return null}var...
2020-05-31
懂王 👐
今天起,你就是懂王 👐 使用方法第一种方式,直接把下面这个拖到收藏夹。然后在任意页面点击使用 #code_a{display:block;width:200px;height:200px;line-height:30px;color:#FFF;-webkit-text-stroke:.8px #000;text-align:center;background: transparent url(//imba97.cn/uploads/2020/05/knowking.jpg) no-repeat scroll 0 0 / 100% auto;cursor:move;font-size:0;border:1px #000...
评论