svg 标签以及位移操作

浅浅的花香味﹌ 2021-07-25 01:35 508阅读 0赞

g组合标签
    
        <g id='xx' stroke='xx' stroke-width='xx'>
            组合标签,对其中的图案进行整体操作,设置的属性必须是所有的图形都有的,不是指g标签内所有图形共有的
        </g>
    
            共有属性:
                样式
                stroke、fill等样式
                位移
                translate='transform(xx,xx)'  css样式的设置
                transform='rotate(-90,350,350)'； 逆时针旋转,后面两个参数为旋转坐标
            
            设置id属性
                dom选中css操作
            
            设置style属性
                写共有样式
    
    text文字标签
        <text>文字</text>
    
        属性:
            x/y:基点,文字以x坐标开始,y坐标为基线之上，可以是百分比
            font-size:设置字体
            text-anchor:'middle'使一行文字的中心位置在基准点上
                        'start'从基准点开始(默认)
                        'end'结束位置在基准点
    
    image图片标签
        <image x='' y='' width='' height='' xlink:href=''></image>
    
        属性:
            x/y:左上角坐标
            width/height:大小设置
            xlink:href='' :图片地址

代码示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{ 
                width:600px;
                height:600px;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div style="border:solid 1px orange;" class='box'>
    
            <svg  width='100%' height='100%'
            xmlns="http://www.w3.org/2000/svg">
            <g transform='translate(200,200)' fill='transparent' stroke='orange' stroke-width='5px'>
                <circle  r='50' ></circle>  
                <circle  r='40' ></circle>  
                <circle  r='30' ></circle>  
            </g>  
            
            <g style='cursor:pointer'>
                <rect x='100' y='100' width='200' height='200' fill='transparent' stroke='black'>
                </rect>    
                <image x='200' y='200' width='100' height='100' xlink:href='https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=372057738,1023632999&fm=111&gp=0.jpg'></image>   
                <text x='200' y='200' font-size='20' text-anchor='middle' >哈哈</text> 
             </g>
            </svg>
            
            
        </div>
    
        
    </body>
    </html>