html - 未显示 SVG 路径

Question

我正在尝试在 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 路径有一点笔画宽度，但它对于所有...的值都是相同的。

标签： htmlsvg

Answer 1

任何一个

1. 用引号将属性括起来
2. 在 and之间放一个空格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>