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

Question

我正在 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"，它变得像一个十字。但现在还不合适。谁能帮我解决这个问题。

这是现在的样子。这不是星号或十字号。

Answer 1

我不太清楚你的意思

I can not use anything else other than ellipse

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

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

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>

你可以把交叉部分弄成你喜欢的样子，仍然用椭圆剪裁它。

Answer 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>

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

How to make a star or a cross using an svg ellipse?

css

svg

ellipse