naosim https://blog.hatena.ne.jp/naosim/ なおしむ論 https://naosim.hatenablog.jp/ svg 文字が思ったところに表示されなくてハマったのでメモ。 まずはこのコードをご覧ください。 <svg viewBox="0 0 50 50"> <text x="0" y="0">あ</text> </svg> x, yがゼロなので 左上あたりに「あ」て表示されると思うじゃないですかーー。 でも実際は... あ ↑ わかる？ 上にちょこっとだけ黒いのが見えるの。 これ「あ」の最後の"払い"の部分です。 つまりキャンバス領域よりも上に「あ」が表示されてる。 なんでや！w 原因はdominant-baselineのデフォルトがideographicだから 文字のy方向の基準位置を決めるプロパティにdo… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fnaosim.hatenablog.jp%2Fentry%2F2018%2F01%2F10%2F070000" title="【SVG】文字が思ったところに表示されない - なおしむ論" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> Hatena Blog https://hatena.blog 2018-01-10 07:00:00 rich https://naosim.hatenablog.jp/entry/2018/01/10/070000 1.0 100%