svg 简单了解

svg放入vue或react
1.直接使用 svg
2.img 引入使用
3.子组件使用

<template>
  <div>
    <svg
      class="icon"
      width="200px"
      height="192.12px"
      viewBox="0 0 1066 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      id="ic-zan1"
    >
      <symbol
        <path
        fill="#333333"
        d="M170.323476 935.471304c2.21559-28.95653 8.523867-57.020669 13.293539-85.330985 10.093243-59.69784 20.524979-119.303363 30.772083-178.939658a20.494207 20.494207 0 0 0-6.739086-19.601817c-57.266845-55.605153-113.856705-111.887291-171.70822-166.938547-26.279358-25.110019-41.326907-53.512651-34.157011-90.192973 7.785337-40.003707 38.742052-65.267587 81.607562-71.021966 67.206228-9.231625 134.227823-19.263324 201.341735-28.987302 12.893503-1.846325 25.756233-4.215775 38.71128-5.32357 10.000927-0.830846 15.693762-5.477431 20.032625-14.370563 36.926499-75.483918 73.852998-150.967836 111.579571-226.051717 26.31013-52.497173 92.747056-64.621373 136.720362-26.033181a96.839743 96.839743 0 0 1 22.094355 30.58745C649.814063 126.165538 686.217437 199.064601 721.666876 272.209841c5.385114 11.016405 12.308833 15.386041 24.340717 17.170822 76.930206 10.739457 153.860412 22.586708 230.790618 33.418481 21.263509 3.077208 41.419223 7.3853 58.466956 21.540458a87.392714 87.392714 0 0 1 13.078135 121.0266c-7.077579 9.231625-15.909167 16.616924-24.156085 24.617665-54.68199 53.328019-109.148576 106.84067-164.015199 160.014829A24.186857 24.186857 0 0 0 852.386682 673.908604c14.278246 81.884511 28.802669 163.73825 42.280841 245.776622 5.631291 34.341644-4.646584 64.344424-33.079989 85.638705-28.95653 21.694318-61.051811 24.617666-93.239409 8.093058q-106.902214-55.082027-212.850494-112.102697c-16.001483-8.646955-28.033367-8.770043-44.219483 0q-106.225228 57.605338-213.958288 112.471962A86.715728 86.715728 0 0 1 172.323661 954.673083a155.46056 155.46056 0 0 1-2.000185-19.201779z m76.560941-1.169339c-0.184632 10.462508 8.370006 15.109092 18.801742 9.90861 16.463064-8.216146 32.618407-17.047734 48.927611-25.602372q88.715913-46.527389 177.401055-93.024005a86.531096 86.531096 0 0 1 54.497358-9.508574c16.463064 2.523311 30.341273 10.524052 44.557975 17.940124q102.963388 53.912688 205.834459 108.16387c5.600519 3.077208 11.23181 7.477616 18.063212 2.646399s4.461952-11.477987 3.354157-17.817036c-13.508944-78.930391-26.494763-157.922327-40.834553-236.698857-6.154416-34.557048-1.138567-65.052182 24.340717-90.162202 43.757901-43.080915 88.008156-85.669477 132.012234-128.504216 16.493836-16.063027 32.833812-32.279914 49.235331-48.373713 4.369636-4.277319 7.446844-8.954676 5.262026-15.386041-1.938641-5.600519-6.831402-6.677542-11.97034-7.323756-6.154416-0.800074-12.1242-1.846325-18.1863-2.707943-72.375938-10.585596-144.628787-22.248216-217.22013-31.295208-42.803967-5.354342-71.945129-24.956159-90.377606-64.621373-28.987302-62.375011-60.682546-123.826859-91.269996-185.740289-5.077394-10.33942-9.693206-20.925016-15.386041-30.956715s-15.570674-9.970155-21.540458-0.15386c-1.815553 3.077208-3.077208 6.154416-4.7389 9.231624-35.234034 71.606636-70.621929 143.151727-105.609787 214.881452-14.216702 29.171934-35.972564 48.373713-68.375567 54.158865-13.939753 2.492539-28.064139 4.000371-42.065437 6.154416-67.08314 9.785522-134.197051 19.417184-201.218646 29.571971-7.785337 1.169339-18.247845-1.169339-22.063583 8.831588-4.123459 10.801001 5.600519 15.786078 11.601075 21.540457q86.161831 84.130873 172.323661 167.984798c21.540458 21.078876 33.54157 46.558161 28.925757 76.653257-9.077764 59.451663-19.971081 118.626378-30.125868 177.924181-4.708129 27.510242-9.477801 55.082027-14.155158 82.253776z"
      >
        </path>

    </svg>
    <svg
      class="icon"
      width="200px"
      height="192.12px"
      viewBox="0 0 1066 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <symbol
        id="ic-zan"
        viewBox="0 0 1024 1024"
      >
        <path
          fill="#333333"
          d="M170.323476 935.471304c2.21559-28.95653 8.523867-57.020669 13.293539-85.330985 10.093243-59.69784 20.524979-119.303363 30.772083-178.939658a20.494207 20.494207 0 0 0-6.739086-19.601817c-57.266845-55.605153-113.856705-111.887291-171.70822-166.938547-26.279358-25.110019-41.326907-53.512651-34.157011-90.192973 7.785337-40.003707 38.742052-65.267587 81.607562-71.021966 67.206228-9.231625 134.227823-19.263324 201.341735-28.987302 12.893503-1.846325 25.756233-4.215775 38.71128-5.32357 10.000927-0.830846 15.693762-5.477431 20.032625-14.370563 36.926499-75.483918 73.852998-150.967836 111.579571-226.051717 26.31013-52.497173 92.747056-64.621373 136.720362-26.033181a96.839743 96.839743 0 0 1 22.094355 30.58745C649.814063 126.165538 686.217437 199.064601 721.666876 272.209841c5.385114 11.016405 12.308833 15.386041 24.340717 17.170822 76.930206 10.739457 153.860412 22.586708 230.790618 33.418481 21.263509 3.077208 41.419223 7.3853 58.466956 21.540458a87.392714 87.392714 0 0 1 13.078135 121.0266c-7.077579 9.231625-15.909167 16.616924-24.156085 24.617665-54.68199 53.328019-109.148576 106.84067-164.015199 160.014829A24.186857 24.186857 0 0 0 852.386682 673.908604c14.278246 81.884511 28.802669 163.73825 42.280841 245.776622 5.631291 34.341644-4.646584 64.344424-33.079989 85.638705-28.95653 21.694318-61.051811 24.617666-93.239409 8.093058q-106.902214-55.082027-212.850494-112.102697c-16.001483-8.646955-28.033367-8.770043-44.219483 0q-106.225228 57.605338-213.958288 112.471962A86.715728 86.715728 0 0 1 172.323661 954.673083a155.46056 155.46056 0 0 1-2.000185-19.201779z m76.560941-1.169339c-0.184632 10.462508 8.370006 15.109092 18.801742 9.90861 16.463064-8.216146 32.618407-17.047734 48.927611-25.602372q88.715913-46.527389 177.401055-93.024005a86.531096 86.531096 0 0 1 54.497358-9.508574c16.463064 2.523311 30.341273 10.524052 44.557975 17.940124q102.963388 53.912688 205.834459 108.16387c5.600519 3.077208 11.23181 7.477616 18.063212 2.646399s4.461952-11.477987 3.354157-17.817036c-13.508944-78.930391-26.494763-157.922327-40.834553-236.698857-6.154416-34.557048-1.138567-65.052182 24.340717-90.162202 43.757901-43.080915 88.008156-85.669477 132.012234-128.504216 16.493836-16.063027 32.833812-32.279914 49.235331-48.373713 4.369636-4.277319 7.446844-8.954676 5.262026-15.386041-1.938641-5.600519-6.831402-6.677542-11.97034-7.323756-6.154416-0.800074-12.1242-1.846325-18.1863-2.707943-72.375938-10.585596-144.628787-22.248216-217.22013-31.295208-42.803967-5.354342-71.945129-24.956159-90.377606-64.621373-28.987302-62.375011-60.682546-123.826859-91.269996-185.740289-5.077394-10.33942-9.693206-20.925016-15.386041-30.956715s-15.570674-9.970155-21.540458-0.15386c-1.815553 3.077208-3.077208 6.154416-4.7389 9.231624-35.234034 71.606636-70.621929 143.151727-105.609787 214.881452-14.216702 29.171934-35.972564 48.373713-68.375567 54.158865-13.939753 2.492539-28.064139 4.000371-42.065437 6.154416-67.08314 9.785522-134.197051 19.417184-201.218646 29.571971-7.785337 1.169339-18.247845-1.169339-22.063583 8.831588-4.123459 10.801001 5.600519 15.786078 11.601075 21.540457q86.161831 84.130873 172.323661 167.984798c21.540458 21.078876 33.54157 46.558161 28.925757 76.653257-9.077764 59.451663-19.971081 118.626378-30.125868 177.924181-4.708129 27.510242-9.477801 55.082027-14.155158 82.253776z"
        >
        </path>
      </symbol>

    </svg>
    <img
      :src="xx"
      alt=""
    >
    <svg
      width="90%"
      height="90%"
      fill="currentColor"
      aria-hidden="true"
      focusable="false"
      class=""
    >
      <use xlink:href="#ic-zan1"></use>
    </svg>
    <svg
      width="90%"
      height="90%"
      fill="currentColor"
      aria-hidden="true"
      focusable="false"
      class=""
    >
      <use xlink:href="#ic-zan"></use>
    </svg>
    <svg
      width="90%"
      height="90%"
      fill="currentColor"
      aria-hidden="true"
      focusable="false"
      class=""
    >
      <use xlink:href="#ic-zan3"></use>
    </svg>
    <video
      id="my-video"
      class="video-js vjs-default-skin"
      controls
      preload="auto"
      width="500px"
    >
      <source
        src="http://d2zihajmogu5jn.cloudfront.net/elephantsdream/hls/ed_hd.m3u8"
        type="application/x-mpegURL"
      />
    </video>
    <button @click="checkVideo()">点击切换到CCTV3</button>

  </div>
</template>

<script>
import xx from "./xx.svg";
import videojs from "video.js";
import "videojs-contrib-hls";

export default {
  data() {
    return {
      xx,
    };
  },
  component: {},
  methods: {
    getVideo() {
      videojs(
        "my-video",
        {
          bigPlayButton: false,
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: true,
        },
        function () {
          this.play();
        }
      );
    },
    checkVideo() {
      var myPlayer = videojs("my-video");
      myPlayer.src([
        {
          type: "application/x-mpegURL",
          src: "http://d2zihajmogu5jn.cloudfront.net/elephantsdream/hls/ed_hd.m3u8", //CCTV3频道
        },
      ]);
      myPlayer.play();
    },
  },
  mounted() {
    let _that = this;
    setTimeout(() => {
      _that.getVideo();
    }, 300);
  },
};
</script>

<style>
</style>

参考链接: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"> 活动时间：2018年2月9日-2018年2月14日</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>

<!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>
</head>

<body>
    <script>
        class SvgWay {
            constructor(watermark) {
                this.watermark = watermark
            }

            render() {
                const { txt, x, y, width, height, color, font, fontSize, alpha, angle } = this.watermark
                const svgStr =
                    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}px" height="${height}px">
                <text x="${x}px" y="${y}px" dy="${fontSize}px"
                    text-anchor="start"
                    stroke="${color}"
                    stroke-opacity="${alpha}"
                    fill="none"
                    transform="rotate(${angle},${x} ${y})"
                    font-weight="100"
                    font-size="${fontSize}"
                    font-family="${font}"
                    >
                    ${txt}
                </text>
            </svg>`;

                return `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;


            }
        }
        let zsvg = new SvgWay({
            width: 200,
            height: 300,
            txt: '你是谁',
            // x: 10,
            // y: 190,
            x: 10,
            y: 10,
            font: 'Arial',
            color: '#f00',
            fontSize: 16,
            alpha: 0.5,
            angle: 22.5
        })
        let zimg = new Image()
        zimg.width = 100;
        zimg.height = 100;

        // zimg.src = this.canvas.toDataURL();
        // zimg.src = zsvg.render()
        zimg.style.backgroundImage = `url(${zsvg.render()})`
        //------------------------
        // let text = 'sss'
        // zimg.style.backgroundImage = `url("data:image/svg+xml;utf8,<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}</text></svg>")`;
        document.body.appendChild(zimg)
    </script>
</body>

</html>