📝 代码查看
使用runcode.html页面

3
查看次数
2025-10-29
创建时间
2025-10-29
最后更新
<div class="grid">
  <svg width="750" height="500">
    <defs>
      <g id="leftalign">
        <line x1="3" y1="3" x2="48" y2="3"></line>
        <line x1="3" y1="19" x2="65" y2="19"></line>
        <line x1="3" y1="35" x2="48" y2="35"></line>
        <line x1="3" y1="51" x2="65" y2="51"></line>
      </g>
      <g id="rightcaret">
        <polyline points="3 3 30 28 3 53"></polyline>
      </g>
      <g id="browser">
        <rect x="3" y="3" width="80" height="60"></rect>
        <line x1="3" y1="19" x2="83" y2="19"></line>
        <line x1="20" y1="3" x2="20" y2="17"></line>
      </g>
      <symbol id="alert" viewBox="0 0 86 86">
        <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
        <ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
        <line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
      </symbol>
      <symbol id="play" viewBox="0 0 86 86">
        <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
        <polygon points="35 23, 60 43, 35 63" />
        <symbol id="download" viewBox="0 0 64 71">
          <path d="M 18 3 L 46 3 L 46 40 L 61 40 L 32 68 L 3 40 L 18 40 Z"></path>
        </symbol>
      </symbol>
    </defs>
    <use href="#leftalign" x="100" y="100"></use>
    <use href="#rightcaret" x="300" y="100"></use>
    <use href="#browser" x="500" y="100"></use>
    <use href="#alert" x="100" y="200" width="100" height="100"></use>
    <use href="#play" x="300" y="200" width="100" height="100"></use>
    <use href="#download" x="500" y="200" width="100" height="100"></use>
  </svg>
</div>
html,
body {
  height: 100%;
  width: 100%;
  background: #e9e9e9;
}

body {
  margin: 0;
  text-align: center;
}

.grid {
  width: 750px;
  height: 500px;
  margin: 0 auto;
  padding-top: 100px;
  padding-left: 100px;
  background-image: url('grid.png');
  position: relative;
}

.grid::before {
  content: "";
  border-left: 1px solid #7c7cea;
  position: absolute;
  top: 0;
  left: 100px;
  width: 750px;
  height: 600px;
}

.grid::after {
  content: "";
  border-top: 1px solid #7c7cea;
  position: absolute;
  top: 100px;
  left: 0;
  width: 850px;
  height: 500px;
}

svg {
  stroke: rgb(0, 0, 0);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
暂无JavaScript代码

👁️ 实时预览