svg 简单了解

wuchangjian2021-11-10 09:38:31编程学习

参考链接:http://cw.hubwiz.com/card/c/5636b7041bc20c980538e995/1/4/5/
参考链接:https://www.jianshu.com/p/8ddb4ba85594


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .warter-mark-area {
            height: 800px
        }
    </style>
</head>

<body><script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]></script>

    <svg viewBox="0 0 1000 500">
        <defs>
            <path id="MyPath" d="M 10,150
              C 150 170 220 240 1000 160
              M 10,150
              " />
        </defs>
        <!-- Show line of the viewport red-->
        <!-- <use xlink:href="#MyPath" fill="none" stroke="red"  /> -->

        <text font-size="50">
            <textPath xlink:href="#MyPath" startOffset="50%">
                我是一段乖巧的实例文字centerdtextdpath元
            </textPath>
        </text>

        <!-- Show outline of the viewport using 'rect' element -->
        <!-- <rect x="1" y="1" width="998" height="298"
            fill="none" stroke="black" stroke-width="2" /> -->
    </svg>




    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <!-- <path id="path1" d="M0,48 C209.6666,12 299.3333,17 479,53" /> -->
            <path id="path1" d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent" />
        </defs>
        <text style="fill:red;">
            <textPath xlink:href="#path1"> 活动时间:201829-2018214</textPath>
        </text>
    </svg>

    <!--二次贝塞尔曲线-->
    <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent" />
        <!-- Points -->
        <circle cx="10" cy="80" r="2" fill="red" />
        <circle cx="95" cy="10" r="2" fill="red" />
        <circle cx="180" cy="80" r="2" fill="red" />
        <line x1="10" y1="80" x2="95" y2="10" style="stroke:rgb(255,0,0);stroke-width:1" />
        <line x1="95" y1="10" x2="180" y2="80" style="stroke:rgb(255,0,0);stroke-width:1" />
    </svg>
    <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' version='1.1'>
        <text width='100%' height='100%' x='20' y='68' transform='rotate(-20)' fill='rgba(0, 0, 0, 0.2)' font-size='14'
            stroke='rgba(255, 255, 255, .2)' stroke-width='1'">我是谁我是谁我是谁我是谁我是谁</text></svg>

    <div class=" warter-mark-area">

            </div>
            <img src="2.png" />
            <script>
                const getBase64Background = (props) => {
                    const { nick, empId } = { nick: 'ss', empId: 'xxx' };
                    const {
                        rotate = 20,
                        height = 75,
                        width = 85,
                        text = `${nick}-${empId}`,
                        fontSize = '14px',
                        lineWidth = 2,
                        fontFamily = 'microsoft yahei',
                        strokeStyle = 'rgba(255, 255, 255, .15)',
                        fillStyle = 'rgba(0, 0, 0, 0.15)',
                        position = { x: 30, y: 30 },
                    } = props;
                    const image = new Image();
                    image.crossOrigin = 'Anonymous';
                    const canvas = document.createElement('canvas');
                    const context = canvas.getContext('2d');
                    canvas.width = width;
                    canvas.height = height;
                    context.font = `${fontSize} ${fontFamily}`;
                    context.lineWidth = lineWidth;
                    context.rotate(rotate * Math.PI / 180);
                    context.strokeStyle = strokeStyle;
                    context.fillStyle = fillStyle;
                    context.textAlign = 'center';
                    context.textBaseline = 'hanging';
                    context.strokeText(text, position.x, position.y);
                    context.fillText(text, position.x, position.y);
                    return canvas.toDataURL('image/png');
                };

                let odiv = document.querySelector('.warter-mark-area')

                let text = 'sss=xxx'
                odiv.style.backgroundImage = `url("data:image/svg+xml;utf8,")`;
                let zimage = new Image()
                zimage.src = getBase64Background({})
                zimage.onload = function () {
                    document.body.appendChild(zimage)
                }
            </script>
</body>

</html>

原文链接:https://blog.csdn.net/qing_gee/article/details/51500220/

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML5中的SVG属性实现圆形进度条效果</title>
</head>
<body>

    
    <svg width="500px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg">   
	<path id="ring" fill="none" stroke="#fd30ae" />
    </svg>
	<script>
	
	
	
	var path = document.getElementById('ring');
    var r=100;
	
    var progress=0.6;
    
    //将path平移到我们需要的坐标位置
    ring.setAttribute('transform', 'translate('+r+','+r+')');
    
    // 计算当前的进度对应的角度值
    var degrees = progress * 360;  
    
    // 计算当前角度对应的弧度值
    var rad = degrees* (Math.PI / 180);
    
    //极坐标转换成直角坐标
    var x = (Math.sin(rad) * r).toFixed(2);
    var y = -(Math.cos(rad) * r).toFixed(2);

    //大于180度时候画大角度弧,小于180度的画小角度弧,(deg > 180) ? 1 : 0
    var lenghty = window.Number(degrees > 180);
    
    //path 属性
    var descriptions = ['M', 0, -r, 'A', r, r, 0, lenghty, 1, x, y];
    
    // 给path 设置属性
    path.setAttribute('d', descriptions.join(' '));
	</script>
</body>
</html>


相关文章

数组实现环形链表

 没想通怎么满额复用初始化队列空间 package com.kali.structur...

链表——笔记理解

众所周知,在一个数组中插入或是删除一个元素,都会需要移动后面...

掌财社:全球加密货币的天堂,为什么是冰岛?

自带文艺忧郁气质的冰岛,国土面积10.3万平方公里,人口只有...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。