SVGテキストの中央ぞろえができない。

Question

SVGでテキストの中央ぞろえができない。

以下のSVGをブラウザ(Chrome・Edge・Safari・FireFox)で表示したところ、「2」の文字が正しく中央に表示されました。

しかしながら、このSVGをPNGに変換すると、作用方向に関しては中央に配置されますが、上下方向に関しては少し上に表示されます。

どのようにすればPNG変換で中央ぞろえを実現できるでしょうか。

コード

試したコードはC#とPythonの2つです。

C#

Asposeライブラリを使用しました。

using Aspose.Words;

var shape = builder.InsertImage("Input.svg");
shape.ImageData.Save("Output.png");

Python

svglibを使いました。

from svglib.svglib import svg2rlg
from reportlab.graphics import renderPM

file_path = "sample.svg"

drawing = svg2rlg(file_path)
renderPM.drawToFile(drawing, "output.png", fmt="PNG")

---

使用する言語に制約はありません。

Comments

[pancake_x]

<svg width="100" height="100" viewBox="0, 0, 100, 100" xmlns="http://www.w3.org/2000/svg">
<text x="50%" y="50%" font-size="50px" font-family="" text-anchor="middle" dominant-baseline="middle">2</text>
<rect x="0" y="0" width="100" height="100" fill="none" stroke="gray"></rect>
</svg>

サンプルSVGの記載忘れを修正しました。

[TakaiY]

質問は編集できますので、編集して追記したほうが目に止まりやすいですよ。

[int32_t]

変換するライブラリが dominant-baseline に対応してないんでしょうねえ。

Answer 1

javascriptで

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    const svg = document.querySelector("svg");
    const src = "data:image/svg+xml;charset=utf-8;base64," + btoa(new XMLSerializer().serializeToString(svg));
    const canvas = Object.assign(document.createElement("canvas"),{width:svg.width.baseVal.value,height:svg.height.baseVal.value});
    const ctx = canvas.getContext("2d");
    const image = new Image;
    image.addEventListener('load',()=>{
      ctx.drawImage( image, 0, 0 );
      const a = Object.assign(document.createElement("a"),{href:canvas.toDataURL("image/png"),download:"image.png"});
      a.click();
    });
    image.src = src;
  });
});
</script>
<svg width="100" height="100" viewBox="0, 0, 100, 100" xmlns="http://www.w3.org/2000/svg">
  <text x="50%" y="50%" font-size="50px" font-family="" text-anchor="middle" dominant-baseline="middle">2</text>
  <rect x="0" y="0" width="100" height="100" fill="none" stroke="gray"></rect>
</svg>
<input type="button" value="save" id="btn">