Text umrahmen in SVG

[ThomasM]

Hallo A-S,

Hallo. Wie kann ich in einer SVG ein Rechteck um einen ganzen Text erstellen, wenn ich wegen variabler schrift nicht genau weis, wie breit er beim Betrachter wird? Ich bräuchte also eine Breite, welche sich an den Inhalt anpasst.

Wenn JavaScript eine Option ist, dann lässt sich mittels getComputedTextLength() die Textbreite ermitteln und dann auf das Rechteck anwenden, etwa mit diesem Ansatz:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function()
      {
        var textobj = document.getElementById("txt");
        var textbreite = textobj.getComputedTextLength().toFixed(1);
        var texthoehe = textobj.getAttribute("font-size");
        var rectobj = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rectobj.setAttribute("x", textobj.getAttribute("x") - 5);
        rectobj.setAttribute("y", textobj.getAttribute("y") - texthoehe);
        rectobj.setAttribute("height", (1.2 * texthoehe).toFixed(1));
        rectobj.setAttribute("width", (1.05 * textbreite).toFixed(1));
        rectobj.setAttribute("stroke", "#F00");
        rectobj.setAttribute("fill", "none");
        document.documentElement.insertBefore(rectobj, textobj);
      });
    </script>
  </defs>
  <text id="txt" x="20" y="40" font-size="24" font-family="sans-serif">Das ist der Text.</text>
  <!--
    Ergebnis:
    <rect x="15" y="16" height="28.8" width="180.7" stroke="#F00" fill="none"/>
  -->
</svg>

Grüße,
Thomas