英文:
How to make this simple figure to an SVG xml path?
问题
以下是翻译好的内容：
在过去的两天里，我一直在尝试将这个图标重新创建为SVG，但我只有一张图片。我对SVG编码非常陌生。
我尝试编码它，但这是我得到的全部内容：
<svg width="100" height="100"><path d="M50 0, L 100 100, L 50 85, L 0 100, Z"/></svg>
也许你可以帮我解决这个问题。
提前感谢！
英文:
In the last two days I'm trying to recreate this icon into an svg which I got only as an image. I'm really new to SVG coding.
I tried to code it, but this is all what I got:
<svg width="100" height="100"><path d="M50 0, L 100 100, L 50 85, L 0 100, Z"/></svg>
Maybe you can help me with that.
Thanks in advance!
答案1
得分: 0
根据评论中的建议（并且您已经开始自己操作），您可以使用路径元素。您可能需要一个用于绘制的编辑器。
我在这里建议的另一种方法是使用不同的基本元素（例如线条）来“构建”形状，以创建蒙版。这需要更多的代码，但更容易修改。
<svg viewBox="0 0 100 100" width="300">
<defs>
<mask id="m1" stroke-linecap="round"
stroke-width="12" stroke="white">
<g transform="translate(50 30)">
<line x2="40" transform="rotate(115)"/>
<line x2="40" transform="rotate(65)"/>
<line y2="30"/>
</g>
<line transform="translate(50 30) rotate(65)
translate(40 0) rotate(130)" x2="30"/>
<line transform="translate(50 30) rotate(115)
translate(40 0) rotate(-130)" x2="30"/>
</mask>
</defs>
<rect width="100" height="100" fill="black"/>
<rect mask="url(#m1)" width="100" height="100"
fill="white"/>
</svg>
英文:
Like suggested in the comments (and you started doing yourself) you can use a path element. And you probably need an editor for drawing it.
The alternative that I suggest here is to "construct" the shape using different basic elements (here lines) to create a mask. Its more code, but easier to modify.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg viewBox="0 0 100 100" width="300">
<defs>
<mask id="m1" stroke-linecap="round"
stroke-width="12" stroke="white">
<g transform="translate(50 30)">
<line x2="40" transform="rotate(115)" />
<line x2="40" transform="rotate(65)" />
<line y2="30" />
</g>
<line transform="translate(50 30) rotate(65)
translate(40 0) rotate(130)" x2="30" />
<line transform="translate(50 30) rotate(115)
translate(40 0) rotate(-130)" x2="30"/>
</mask>
</defs>
<rect width="100" height="100" fill="black"/>
<rect mask="url(#m1)" width="100" height="100"
fill="white"/>
</svg>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论