0

SVG Essentialsの本を読み始めたばかりですが、例 2-2 で理解できないことがあります。「HTML ファイル内のインライン SVG」。

「ルック・マ、同じフォント！」のフォント・サイズ。text は "And here is regular HTML again..." よりも大きくなりますが、どちらも同じようにスタイル設定されていますが、実際にはスタイル設定されておらず、デフォルトを使用しています。これは例のコードです (こちらも参照してください):

<head>
    <style>
        svg {
          display:block;
          width:500px;
          height:500px;
          margin: auto;
          border: thick double navy;
          background-color: lightblue;
        }
        body {
          font-family: cursive;
        }
        circle {
          fill: lavender;
          stroke: navy;
          stroke-width: 5;
        }
        </style>
    </head>
    <body>
        <h1>Inline SVG in HTML Demo Page</h1>
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
            <title>An SVG circle</title>
            <circle cx="125" cy="125" r="100"/>
            <text x="125" y="125" dy="0.5em" text-anchor="middle">Look Ma, Same Font!</text>
        </svg>
        <p>And here is regular HTML again...</p>
    </body>
</html>

ここで何が欠けているのですか？

4

2 に答える 2