英文:
How can i cut my hexagon svg in half vertically
问题
我想将这个六边形的SVG垂直切成两半，使它看起来像这样。如何实现这个目标？
英文:
i have this hexagon svg:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg width="100%" height="125">
<g transform="translate(-33 -35)">
<g transform="translate(33 35)">
<polygon points="50,0 100,28.87 100,86.61 50,115.48 0,86.61 0,28.87" fill="#28282B"/>
</g>
<g transform="translate(83.5 68.305)">
<polygon points="0,0 -50,28.87 0,57.74 50,28.87" fill="#28282B" />
</g>
</g>
</svg>
<!-- end snippet -->
I want to cut this in half vertically so that it looks like this
How can i achieve this?
答案1
得分: 2
多边形的“points”属性中的数字对是x/y坐标。
你可以只去掉最后两个点，得到六边形的右半部分。
在下面的代码片段中，第一个路径是原始的六边形。第二个是右半部分，与第一个相同，但去掉了最后两个坐标。
（我还去掉了两个相互抵消的变换组，以及另一个多边形，似乎没有提供任何有用的内容。）
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-html -->
<svg width="100%" height="125">
<!-- 原始六边形 -->
<polygon points="50,0 100,28.87 100,86.61 50,115.48 0,86.61 0,28.87" fill="#28282B"/>
<!-- 右半部分 -->
<polygon points="50,0 100,28.87 100,86.61 50,115.48" fill="#9999ff"/>
</svg>
<!-- 结束代码片段 -->
更新：如果要将两半作为单独的SVG，请制作两份副本，并从每个副本中删除相关的点：
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-html -->
<!-- 左半部分 -->
<svg viewBox="0 0 50 116" width="50" height="116">
<polygon points="50,0 50,115.48 0,86.61 0,28.87" fill="skyblue"/>
</svg>
<!-- 右半部分 -->
<svg viewBox="50 0 50 116" width="50" height="116">
<polygon points="50,0 100,28.87 100,86.61 50,115.48" fill="steelblue"/>
</svg>
<!-- 结束代码片段 -->
我还通过在这些SVG上使用“viewBox”属性来调整了画布，这样它们更容易对齐在一起，而不会留下另一半过去的死空间。
英文:
The number pairs in the polygon's points attribute are x/y coordinates.
You could just lop off the last two points to get the right half of the hexagon.
In the snippet below the first path is the original hex. The second is the right half--same as the first but with the last two coordinates removed.
(I've also removed the two transform groups that canceled each other out, and the other poly that didn't appear to be contributing anything useful.)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg width="100%" height="125">
<!-- original hexagon -->
<polygon points="50,0 100,28.87 100,86.61 50,115.48 0,86.61 0,28.87" fill="#28282B"/>
<!-- right half -->
<polygon points="50,0 100,28.87 100,86.61 50,115.48" fill="#9999ff"/>
</svg>
<!-- end snippet -->
Update: If you want the halves as separate SVGs make two copies and delete the relevant points from each:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!-- left half -->
<svg viewBox="0 0 50 116" width="50" height="116">
<polygon points="50,0 50,115.48 0,86.61 0,28.87" fill="skyblue"/>
</svg>
<!-- right half -->
<svg viewBox="50 0 50 116" width="50" height="116">
<polygon points="50,0 100,28.87 100,86.61 50,115.48" fill="steelblue"/>
</svg>
<!-- end snippet -->
I also tightened up the canvas with the viewBox attribute on these so they’d be easier to line up next to each other, without all the dead space where the other half used to be.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论