svg 操作

最新推荐文章于 2023-06-26 11:59:57 发布

静静的躺平

最新推荐文章于 2023-06-26 11:59:57 发布

阅读量193

点赞数

分类专栏： svg 文章标签： elementui webview javascript

本文链接：https://blog.csdn.net/weixin_39578505/article/details/123425782

版权

svg 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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 type="text/css">
      * {
        box-sizing: border-box;
      }

      .img_c {
        background-image: url("./images/1.jpg");
        width: 3024px;
        height: 590px;
      }
    </style>
  </head>
  <body>
    <div
      class="div1"
      style="width: 200px; height: 400px; top: 50px; position: absolute"
    >
      <svg
        viewBox="0 0 200 100"
        xmlns="http://www.w3.org/2000/svg"
        class="svg1"
      >
        <!-- <defs>
            <linearGradient id="Gradient01">
              <stop offset="20%" stop-color="#39F" />
              <stop offset="90%" stop-color="#F3F" />
            </linearGradient>
          </defs> -->
        <!-- LineTo commands with absolute coordinates -->
        <path
          fill="red"
          stroke="red"
          class="path1"
          d="M 10,10
                 L 10,90
                 L 90,90
                 L 90,10 
                 L 10,10"
        />

        <!-- LineTo commands with relative coordinates -->
        <path
          fill="none"
          stroke="red"
          d="M 110,10
                 l 80,80
                 v -70
                 h -70"
        />
      </svg>
      <svg viewBox="-10 -10 120 120">
        <mask id="myMask">
          <!-- Everything under a white pixel will be visible  白色可见  黑色不可见 -->
          <rect x="0" y="0" width="120" height="120" fill="white" stroke="1" />

          <!-- Everything under a black pixel will be invisible -->
        </mask>

        <!-- <polygon points="-10,110 110,110 110,-10" fill="orange" />
       -->
        <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
        <circle cx="50" cy="50" r="50" mask="url(#myMask)" fill="orange" />
      </svg>
    </div>
  </body>
  <script>
    var div1 = document.getElementsByClassName("div1")[0];

    var svg1 = document.getElementsByClassName("svg1")[0];
    var path1 = svg1.getElementsByClassName("path1")[0];
    var defs1 = document.createElementNS("http://www.w3.org/2000/svg", "defs");

    defs1.innerHTML = ` <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="100" width="100">
      <image x="0" y="0" height="100" width="100" xlink:href="./images/1.jpg"></image>
    </pattern>
    <linearGradient id="Gradient01">
              <stop offset="20%" stop-color="#39F" />
              <stop offset="90%" stop-color="#F3F" />
            </linearGradient>
    `;
    svg1.appendChild(defs1);
    //path1.style.fill="url(#image)";

    // console.log(path1);
    path1.addEventListener("click", function (e) {
      console.log(e.offsetX);
      console.log(e.offsetY);
      e.target.style.fill = "url(#image)";
    });
  </script>
</html>

静静的躺平

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg 操作

<!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" /> <tit.
复制链接

扫一扫