时间戳

首页 > 解决方案 > 是否可以使用 svg 制作此图像

html - 是否可以使用 svg 制作此图像

问题描述

这是我想要制作的图像。

在此处输入图像描述

但这是我的 SVG 代码

    <svg class="teeth" id="svg"
     width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
        <!-- upper right 8 -->
        <g id="molar-group" class="molar">
            <rect x="75" y="75" stroke="black" id="disto-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
            <rect x="200" y="75" stroke="black" id="mesio-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
    
            <polygon stroke="black" id="disto-buccal" style="stroke-width: 5px;" points="0 0 200 0 200 75 75 75" fill="white" />
            <polygon stroke="black" id="mesio-buccal" style="stroke-width: 5px;" points="200 0 400 0 325 75 200 75" fill="white" />
    
            <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="400 0 400 300 325 225 325 75" fill="white" />
    
            <polygon stroke="black" id="mesio-palatal" style="stroke-width: 5px;" points="400 300 200 300 200 225 325 225" fill="white" />
            <polygon stroke="black" id="disto-palatal" style="stroke-width: 5px;" points="200 300 0 300 75 225 200 225" fill="white" />
    
            <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
        </g>
    </svg>

我的 SVG 代码的输出如下图所示：

在此处输入图像描述

任何人都可以帮助我如何根据我的 SVG 代码制作第一张图片吗？第二张图片中唯一缺少的是 X 线，任何人都可以帮助如何在第一张图片中添加 X 线，可以使用 SVG 吗？

标签： htmlsvg

解决方案

第二张图片中唯一缺少的是 X 线，任何人都可以帮助如何在第一张图片中添加 X 线，可以使用 SVG 吗？

要添加X到图像中，只需添加几行<polyline> 

<svg class="teeth" id="svg"
     width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
        <!-- upper right 8 -->
        <g id="molar-group" class="molar">
            <rect x="75" y="75" stroke="black" id="disto-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
            <rect x="200" y="75" stroke="black" id="mesio-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
    
            <polygon stroke="black" id="disto-buccal" style="stroke-width: 5px;" points="0 0 200 0 200 75 75 75" fill="white" />
            <polygon stroke="black" id="mesio-buccal" style="stroke-width: 5px;" points="200 0 400 0 325 75 200 75" fill="white" />
    
            <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="400 0 400 300 325 225 325 75" fill="white" />
    
            <polygon stroke="black" id="mesio-palatal" style="stroke-width: 5px;" points="400 300 200 300 200 225 325 225" fill="white" />
            <polygon stroke="black" id="disto-palatal" style="stroke-width: 5px;" points="200 300 0 300 75 225 200 225" fill="white" />
    
            <polygon stroke="black" class="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" /> 
                 <!-- Two lines added -->
			<polygon stroke="black" class="distal" style="stroke-width: 5px;" points="100 300  300 0" fill="white" /> 
			 <polygon stroke="black" class="distal" style="stroke-width: 5px;" points="300 300  100 0" fill="white" />
        </g>
    </svg>

推荐阅读