gpt4 book ai didi

html - 如何将 svg 嵌入到 svg 中?

转载 作者:太空宇宙 更新时间:2023-11-04 06:50:25 30 4
gpt4 key购买 nike

我必须执行此任务,我必须将一个 svg 嵌入到另一个 svg 中。 由于我是 SVG 的新手,我已经完成了多边形和矩形部分,但是在将这两个部分结合起来时我遇到了问题。我附上我已完成的工作。

最佳答案

不要有一堆 SVG。相反,您应该将所有形状放入一个大的 SVG 中。

下面是一个简单的例子。但请记住,您可能会发现仅使用众多可用的矢量绘图应用程序之一来创建 SVG 会更容易。

<!DOCTYPE html>
<html>
<body>

<svg width="550" height="400">
<g>
<rect width="300" height="30" style="fill:rgb(255,0,0);" />
<text x="10" y="20" fill="white">Fatality</text>
</g>

<g transform="translate(0,40)">
<rect width="300" height="30" style="fill:rgb(255,0,0);" />
<text x="10" y="20" fill="white">Lost Time Incidents</text>
</g>

<g transform="translate(0,80)">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="10" y="20" fill="white">Restricted Work Cases</text>
</g>

<g transform="translate(0,120)">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="10" y="20" fill="white">Medical Treatment Cases</text>
</g>

<g transform="translate(0,160)">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="10" y="20" fill="white">First Aid Cases</text>
</g>

<g transform="translate(0,200)">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="10" y="20" fill="white">RTA Incident</text>
</g>

<g transform="translate(0,240)">
<rect width="300" height="30" style="fill:rgb(255,128,0);" />
<text x="10" y="20" fill="white">Environment Incident</text>
</g>

<g transform="translate(0,280)">
<rect width="300" height="30" style="fill:rgb(102,204,0);" />
<text x="10" y="20" fill="white">Near Miss</text>
</g>

<g transform="translate(0,320)">
<rect width="300" height="30" style="fill:rgb(102,204,0);" />
<text x="10" y="20" fill="white">Unsafe Acts & Conditions</text>
</g>

<g transform="translate(0,360)">
<rect width="300" height="30" style="fill:rgb(102,178,255);" />
<text x="10" y="20" fill="white">Man Hours</text>
</g>

<polygon points="350,0, 550,400, 150,400" style="fill:white;stroke:black;stroke-width:1" />

</svg>

关于html - 如何将 svg 嵌入到 svg 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52925654/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com