svg大屏背景效果

最新推荐文章于 2024-06-17 23:49:16 发布

LYP_0320

最新推荐文章于 2024-06-17 23:49:16 发布

阅读量197

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/LYP_0320/article/details/134369149

版权

<div class="nav">
      <div class="nav-but">
        <div class="but-text but-text-s">预报</div>
        <div class="but-text">实况监测</div>
        <div class="but-text">统计与分析</div>
      </div>
      <svg height="140" width="350">
        <text x="85" y="17" style="fill: #55c7ff; font-size: 18">导航栏</text>
        <polyline
          points="27,10 70,10 76,30 150,30 156,10 330,10 346,30 346,114 330,134 27,134 10,114 10,30 27,10"
          style="
            fill: #1b5295;
            stroke: #1b5295;
            stroke-width: 1;
            fill-opacity: 0.3;
          "
        />
        <polyline
          points="10,44 10,30 27,10 41,10"
          style="fill: none; stroke: #00daf0; stroke-width: 2"
        />
        <polyline
          points="10,100 10,114 27,134 50,134"
          style="fill: none; stroke: #00daf0; stroke-width: 2"
        />
        <polyline
          points="316,10 330,10 346,30 346,44"
          style="fill: none; stroke: #00daf0; stroke-width: 2"
        />
        <polyline
          points="346,100 346,114 330,134 310,134"
          style="fill: none; stroke: #00daf0; stroke-width: 2"
        />
        <circle cx="10" cy="44" r="3" style="fill: #00daf0" />
        <circle cx="41" cy="10" r="3" style="fill: #00daf0" />
        <circle cx="10" cy="100" r="3" style="fill: #00daf0" />
        <circle cx="50" cy="134" r="3" style="fill: #00daf0" />
        <circle cx="316" cy="10" r="3" style="fill: #00daf0" />
        <circle cx="346" cy="44" r="3" style="fill: #00daf0" />
        <circle cx="346" cy="100" r="3" style="fill: #00daf0" />
        <circle cx="310" cy="134" r="3" style="fill: #00daf0" />
      </svg>
      <svg
        width="300"
        height="300"
        viewBox="0 0 100 100"
        style="border: 1px solid red"
      >
        <path d="M10 10 H 90 V 90 Z" fill="pink" stroke="" stroke-width="" />
      </svg>
      <svg width="350" height="140">
        <!-- <circle cx="10" cy="10" r="2" fill="red" /> -->
        <path
          d="M10 10 L 40 10 L 40 40"
          fill="red"
          stroke="red"
          stroke-width="2"
        />
        <!-- <path d="M10 10" fill="pink" stroke="pink" stroke-width="10" /> -->
      </svg>
      <svg width="200" height="200">
        <circle cx="50" cy="50" r="30" class="circle-shadow">
          <!-- <animate
            attributeType="CSS"
            attributeName="box-shadow"
            from="0 0 0 0 rgba(255, 255, 255, 0.4)"
            to="0 0 0 20px rgba(255, 255, 255, 0)"
            dur="1.5"
            repeatCount="indefinite"
          /> -->
        </circle>
      </svg>
      <div class="aaa">aaa</div>
    </div>