cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

SVG-Bug: different rendering of standalone-SVG and inline-SVG for foreignObject-tag

padina
Making moves


I developed an SVG inline a HTML-file  and used the foreignObject. Everything worked fine.
Then I build an svg-file from the inline-svg. And the foreignObject did not worked anymore. 😞
HTML-example

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<h1>Test include vs. inline</h1>
<h2>Include SVG </h2>
<div>
    <img  width="841mm" height="1189mm" src="error_poster_2.svg" />
</div>
<h2>Inline SVG</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="841mm" height="1189mm" viewBox="0 0 2384 3370">
    <g>
        <text x="1640" y="1535" font-size="22" font-weight="bolder">
            testing
        </text>

        <foreignObject x="1640" y="1545" width="100" height="100" xmlns="http://www.w3.org/1999/xhtml">
            <h1>Hier ist die Welt</h1>
        </foreignObject>
    </g>
</svg>
</body>
</html>

SVG-Example "error_poster_2.svg"

<svg xmlns="http://www.w3.org/2000/svg" width="841mm" height="1189mm" viewBox="0 0 2384 3370">
    <g>
        <text x="1640" y="1535" font-size="22" font-weight="bolder">
            testing
        </text>

        <foreignObject x="1640" y="1545" width="100" height="100" xmlns="http://www.w3.org/1999/xhtml">
            <h1>Hier ist die Welt</h1>
        </foreignObject>
    </g>
</svg>


Interesting: The attribute width in <img> leads to another size than the attribute width in <svg>.  See the example-code.  (I saw the same bug in the chrome too. Perhaps I misunderstood the usage of the attribute width. I am not an expert.)

0 REPLIES 0

Type a product name