CODEWITHSUNDEEP
htmlsvg
duri
duri

Reputation: 131

SVG element in html not showing

I'm trying to show a SVG graphic inside my html page; in the page, in a div, I have this code:

<svg id="Scanvas" width="800" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs><style type="text/css">
        polygon{
            stroke: #168fdc;
            stroke-width: 5;
            fill: #95CFF4;
            opacity: 0.75;
            /*fill-rule: nonzero;*/
        }       
    </style></defs>
    <g transform="translate(152.45,250) scale(225,-225)">
        <polygon points="-0.5,1 0.5,1 0.5,-1 -0.5,-1"></polygon>
    </g>
</svg>

But the page shows nothing. More precisely, in the page style I set a background for the svg tag and it shows, but no elements are displayed inside it.

How can I make things show correctly? Thanks

EDIT: Working on google chrome

EDIT2: Tried the same svg in jsfiddle.net, and there it works. Looking into the source code, it seems they put the style inside the head tag in the html, however this doesn't work in my page

EDIT3: Putting a polygon outside the make both polygons show:

<svg id="Scanvas" width="800" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="0,0 10,0 10,10 0,10"></polygon>
    <g transform="translate(152.5,250) scale(225,-225)">
        <polygon points="-0.5,1 0.5,1 0.5,-1 -0.5,-1 "></polygon>
    </g>
</svg>

Can someone explain me that?

LAST EDIT At the end I found the issue: I didn't mentioned I was creating the svg polygons with javascript, and due to a namespace issue (this is what I understood) tags were created but not displayed. Found the answer here: How to make Chrome redraw SVG dynamically added content?.

Upvotes: 1

Views: 7603

Answers (2)

defector
defector

Reputation: 11

Your polygon is overscaled if that makes a sense. So You see a rendering of the polygon over entire rendering area.

Try to load this modified code into SVG enabled browser:

<svg id="Scanvas" width="800" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs><style type="text/css">
        polygon{
            stroke: #168fdc;
            stroke-width: 5;
            fill: #95CFF4;
            opacity: 0.75;
            /*fill-rule: nonzero;*/
        }       
    </style></defs>
    <g transform="translate(152.45,250)">
        <polygon points="0,0 100,0 100,100 0,100"></polygon>
    </g>
</svg>

and then try this one:

<svg id="Scanvas" width="800" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs><style type="text/css">
        polygon{
            stroke: #168fdc;
            stroke-width: 5;
            fill: #95CFF4;
            opacity: 0.75;
            /*fill-rule: nonzero;*/
        }       
    </style></defs>
    <g transform="translate(152.45,250) scale(2,2)">
        <polygon points="0,0 100,0 100,100 0,100"></polygon>
    </g>
</svg>

This will give You an idea of how much to scale. Supose You already have read a polygon.

EDIT Code was tested in an independent file, containing only the SVG code snippet. Tested under Chromium. Definitely shows difference from Your sample code (as given). Under plain Ubuntu (if that makes any diff).

Upvotes: 1

Francis Hemsher
Francis Hemsher

Reputation: 3488

Because your scale is humongus, and the stroke-width is set at 5, which is greater than the size of the polygon itself, the only thing that displays is the stroke. Try setting your stroke-width=.1

Upvotes: 0

Related Questions