如何使用 svg 椭圆制作星形或十字形？答案

【问题标题】：How to make a star or a cross using an svg ellipse?如何使用 svg 椭圆制作星形或十字形？
【发布时间】：2021-04-14 16:18:01
【问题描述】：

我正在svg 中创建一个ellipse。在这个ellipse 中，我试图给出一个像星形或十字形的形状。除了ellipse，我不能使用其他任何东西。这是我到目前为止所做的。

<ellipse cx="96" cy="126" rx="5" ry="5" fill="#EF4444" stroke="#EF4444" stroke-width="19" stroke-dasharray="4" opacity="1" transform="translate(139 50)"></ellipse>

我所做的只是添加了stroke-dasharray="4"，它变成了一个十字架。但这还不合适。谁能帮我解决这个问题。

这就是现在的样子。哪个不是星星也不是十字架。

【问题讨论】：

我想你可以应用星形或十字形的clipPath到椭圆。
您能否提供更多详细信息。我对 clipPath 没有太多想法
如果您不知道如何创建 SVG，最好使用 SVG 编辑器，例如询问 inkscape 并使用它来绘制您需要的任何内容。
感谢您的建议。我现在正在检查

标签： css svg ellipse

【解决方案1】：

我不完全确定你的意思

我不能用除了椭圆之外的任何东西

如果您严格遵守该限制，那么您的请求似乎几乎是不可能的。

您的第一次尝试是个好主意，但不幸的是它可能会遇到问题。创建笔触宽度大于半径（从技术上讲，大于半径的两倍）的圆或椭圆，并不总是能够正确渲染。

Robert 建议的方法更好、更灵活，但需要使用 <ellipse> 以外的 SVG 元素

例如采取以下设计。

svg {
  width: 400px;
}

<svg viewBox="0 0 100 70">
  <ellipse cx="50" cy="35" rx="40" ry="28"
           fill="none" stroke="black" stroke-width="1"/>

  <g class="cross">
    <rect x="0" y="20" width="100" height="30" transform="rotate(35, 50,35)"/>
    <rect x="0" y="20" width="100" height="30" transform="rotate(-35, 50,35)"/>
  </g>
</svg>

如果我们将椭圆变成剪辑路径，并将其应用于十字，我们会得到：

svg {
  width: 400px;
}

<svg viewBox="0 0 100 70">
  <defs>
    <clipPath id="oval">
      <ellipse cx="50" cy="35" rx="40" ry="28"/>
    </clipPath>
  </defs>

  <g class="cross" clip-path="url(#oval)">
    <rect x="0" y="20" width="100" height="30" transform="rotate(35, 50,35)"/>
    <rect x="0" y="20" width="100" height="30" transform="rotate(-35, 50,35)"/>
  </g>
</svg>

你可以让十字部分看起来像你喜欢的那样，并且仍然用椭圆夹住它。

【讨论】：

感谢您的详尽解释。

【解决方案2】：

另一个想法。用四个椭圆从一个圆上剪出一个十字

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  
         
 <circle cx="200" cy="200" r="100" fill="crimson" /> 
 <circle cx="200" cy="200" r="40" fill="none" stroke="black" /> 
 <circle cx="200" cy="200" r="2" fill="black" /> 
 <polyline fill="none"  stroke="black" points="0,0 400,400" />
   <polyline fill="none"  stroke="black" points="0,400 400,0" />
 <ellipse transform="rotate(45 100 125)" cx="80" cy="107" rx="102" ry="50" fill="gold" opacity="0.5" />
   <ellipse transform="translate(125 -20) rotate(135 100 125)" cx="45" cy="80" rx="100" ry="50" fill="gold" opacity="0.5" /> 
     <ellipse transform="translate(125 -20) rotate(225 100 125)" cx="-90" cy="40" rx="100" ry="50" fill="gold" opacity="0.5" /> 
       <ellipse transform="translate(125 -20) rotate(315 100 125)" cx="-125" cy="175" rx="100" ry="50" fill="gold" opacity="0.5" />

</svg>

然后你可以使用这些省略号作为遮罩。

.container {
width:75vw;
height:auto;
}

<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 50 400 400"  preserveAspectRatio="xMinYMin meet">  
<defs>
<mask id="msk"> 
  <rect width="100%" height="100%" fill="white" />
  <g id="group" fill="black">
 <ellipse transform="rotate(45 100 125)" cx="80" cy="107" rx="102" ry="50"  />
   <ellipse transform="translate(125 -20) rotate(135 100 125)" cx="45" cy="80" rx="100" ry="50"  /> 
     <ellipse transform="translate(125 -20) rotate(225 100 125)" cx="-90" cy="40" rx="100" ry="50"  /> 
       <ellipse transform="translate(125 -20) rotate(315 100 125)" cx="-125" cy="175" rx="100" ry="50"  />
 </g>
</mask> 
</defs>  
  <image href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Foro_Romano.jpg/1200px-Foro_Romano.jpg "
width="100%" height="100%"  />
 <circle mask="url(#msk)" cx="200" cy="200" r="100" fill="crimson" opacity="0.7" /> 

</svg> 
</div>

【讨论】：