CODEWITHSUNDEEP
htmlsvg
Theo75
Theo75

Reputation: 487

SVG Path not displayed

I'm trying to create a svg balise in HTML code. I don't understand why with the code below, my second path is not displayed:

<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>

This code displays this picture:

enter image description here

If I remove these options "stroke="white" stroke-width=3px" in the first svg path, my picture is correctly diplayed as:

<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>

enter image description here

Additionnaly, it looks like that "stroke-width" argument is not evaluated in svg path balise. As you can see there is a little stroke width for svg path however it's the same value for all ....

Upvotes: 2

Views: 1449

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

Either

  1. Enclose the attribute in quotes
  2. Put a space between 3px and /> i.e., stroke-width=3px />

3px/> confuses the parser as to when the attribute ends and when the element ends

<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>

Upvotes: 3

Related Questions