CODEWITHSUNDEEP
svg
Christopher Horler
Christopher Horler

Reputation: 73

relative sizes of SVG text and rect

Is anyone able to offer an explanation of the change in relative size of the rect and text when adding attributes (width, height, viewBox) to the SVG element? (tested in Firefox 30 on Linux x86_64)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Test</title>
    <script src="jquery.js"></script>
    <script src="d3.js"></script>
</head>

<body>

    <svg>
    <g transform="translate(10, 10)">
        <rect fill="yellow" height="7.45em" width="29.4em"></rect>
        <text stroke="black">
            <tspan dy="1.69em" x="2.65em">PNUUUUUUUUU</tspan>
            <tspan dy="1.69em" x="2.65em">TEST TEST TEST TEST TEST</tspan>
            <tspan dy="1.69em" x="2.65em">EEE</tspan>
            <tspan dy="1.69em" x="2.65em">QQQ</tspan>
        </text>
    </g>
    </svg>
</body>

</html>

shows as desired:

enter image description here

changing the svg element to <svg width="400px" height="300px">

or <svg width="400px" height="300px" viewBox="0 0 400 300">

gives this result:

enter image description here

Upvotes: 0

Views: 3261

Answers (1)

dfear
dfear

Reputation: 38

See: http://www.impressivewebs.com/understanding-em-units-css/

If you do not set font-size anywhere in your document (css or html file), then "em" will be relative to the size of font used by the web browser.

In google chrome, this is in settings under: web content -> font-size.

Upvotes: 1

Related Questions