未显示 SVG 路径答案

【问题标题】：SVG Path not displayed未显示 SVG 路径
【发布时间】：2021-01-12 07:44:25
【问题描述】：

我正在尝试在 HTML 代码中创建一个 svg 应答器。我不明白为什么下面的代码没有显示我的第二条路径：

<svg width="500px" height="500px" style="border: 2px solid gray">
                <rect width="490" height="490" x="5" y="5" stroke-width=3px stroke="white" fill="#a7f3ed" />
                <polygon points="420 215, 495 300, 495 360, 300 360" stroke="white" stroke-width="3px" fill="#e9d5f3" />
                
                <path d="M 6,350 
                         C 85,355 
                          245,400 
                          240,495
                         L 5,495Z" 
                         fill="green" stroke="white" stroke-width=3px/> 
                <path d="M 70,495 
                         C 200,415 
                          350,370 
                          495,350
                         L 495,495Z" 
                         fill="red" stroke="white" stroke-width=3px/> 
                
        </svg>

这段代码显示这张图片：

如果我在第一个 svg 路径中删除这些选项“stroke="white" stroke-width=3px”，我的图片将正确显示为：

<svg width="500px" height="500px" style="border: 2px solid gray">
                <rect width="490" height="490" x="5" y="5" stroke-width=3px stroke="white" fill="#a7f3ed" />
                <polygon points="420 215, 495 300, 495 360, 300 360" stroke="white" stroke-width="3px" fill="#e9d5f3" />
                
                <path d="M 6,350 
                         C 85,355 
                          245,400 
                          240,495
                         L 5,495Z" 
                         fill="green" /> 
                <path d="M 70,495 
                         C 200,415 
                          350,370 
                          495,350
                         L 495,495Z" 
                         fill="red" stroke="white" stroke-width=3px/> 
                
        </svg>

另外，看起来“stroke-width”参数没有在 svg 路径应答器中进行评估。正如你所看到的，svg 路径有一点笔触宽度，但它对所有的值都是相同的......

【问题讨论】：

标签： html svg

【解决方案1】：

要么

用引号将属性括起来
在3px 和/> 之间放置一个空格，即stroke-width=3px />

3px/> 使解析器混淆属性何时结束以及元素何时结束

<svg width="500px" height="500px" style="border: 2px solid gray">
                <rect width="490" height="490" x="5" y="5" stroke-width=3px stroke="white" fill="#a7f3ed" />
                <polygon points="420 215, 495 300, 495 360, 300 360" stroke="white" stroke-width="3px" fill="#e9d5f3" />
                
                <path d="M 6,350 
                         C 85,355 
                          245,400 
                          240,495
                         L 5,495Z" 
                         fill="green" stroke="white" stroke-width="3px"/> 
                <path d="M 70,495 
                         C 200,415 
                          350,370 
                          495,350
                         L 495,495Z" 
                         fill="red" stroke="white" stroke-width=3px /> 
                
        </svg>

【讨论】：