html - 使用 SVG 路径创建圆柱体

Question

我正在尝试创建一个如下图所示的 SVG 圆柱体，但它不起作用。这是我到目前为止所尝试的：

<svg>
   <path d=" M 0 20 0 200 M 0 200 C 0 200, 130 250, 260 200 M 260 200 260 20 M 260 20 C 260 0, 130 50, 0 20 M 0 20 C 0 20, 130 -50, 260 20" stroke="black" stroke-width="2" fill="#84D3DB"/>
</svg>

---

它应该是这样的：

标签： htmlcsssvg

Answer 1

使用圆弧使用单个路径

svg {
  height:90vh;
  margin:1em auto; 
  display: block;
  stroke-width:1;
  fill:lightblue;
  border:1px solid green;
}

svg:hover path {
  fill:lightgreen
}

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 100 100">

    <path d="
             M2,50
             A50,10 0 0,0 98,50
             A50,10 0 0,0 2,50
             L2,75
             A50,10,0 0,0 98,75
             L98,50             
             "
          style="stroke:#660000;"/>
</svg>