搜索
博主信息
博文 20
粉丝 0
评论 0
访问量 23365
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML svg自适应写法和SVG实现不规则形状图片触发事件
大鱼
原创
1211人浏览过
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <div style="width:30%; height:3.6rem;">
     <svg width="100%" height="100%" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
         <rect x="0" y="0" width="40" height="30" fill="#cd0000"/>
    </svg>
    </div>
    <script src="/moban/js/jquery.min.js"></script>
    <script type="text/javascript">
   (function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        /*如果屏幕尺寸发生了变化就会立即更新*/
        recalc = function() {
            /*     var clientWidth = docEl.clientWidth;*/
            var clientWidth = parseInt($('body').width());
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
    if (!doc.addEventListener) return;
    /*如果窗口改变了大小 手机旋转了都会重新修改font-size属性*/
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);    	
    $(function() {
        $('.dds').on('click', function() {
            $(this).attr('fill', 'green');
        })
    })
 

    </script></body></html>
    
    html5 svg实现不规则形状图片触发事件
    
    <!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"  class="dds" /></svg><script src="/moban/js/jquery.min.js"></script><script type="text/javascript">
    $(function(){
        $('.dds').on('click',function(){
            $(this).attr('fill','green');
        })
    })</script></body></html>



原文地址:http://newmiracle.cn/?m=201803

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学