Wie man anpassbare Svg auf Browsergröße anpassen

Question

Ich habe eine Form mit Svg erstellt, aber wenn Sie die Größe des Browsers ändern, wird es kupiert. Wenn jemand die Lösung kennt, antworte bitte.

<svg width="1315" height="65" id="intro-weg" style="background: red"> 
    <g transform="matrix(1.25,0,0,-1.25,0,611.25)"> 
     <g transform="scale(0.1,0.1)"> 
      <path d="m 10520,4376 c -383.8,320.87 -877.97,514 -1417.32,514 0,0 526.42,-552.76 -2211.03,-552.76 L 0,4337.24 0,0 l 10520,0 0,4376" class="colorize"></path> 
     </g> 
    </g> 
</svg> 

Answer 1

Sie können diese Schritte folgen, um Ihre SVG ansprechbar zu machen:

1. Entfernen fest einprogrammiert width, height Attribute von Ihrem svg Element.

   <svg id="intro-weg" style="background: red"> 
   

2. hinzufügen viewBox Attribut, um die erforderliche Breite und Höhe angibt, die als die 3. und 4. Werte (gleiche wie Sie für Ihre svg früher angegeben) jeweils: (more about viewBox)

   <svg id="intro-weg" viewBox="0 0 1315 65" style="background: red"> 
   

3. Geben Sie Breite und Höhe für Ihr svg Element in CSS:

   svg#intro-weg{ 
       width: 100%; 
       height: auto; 
   } 
   

Ihr svg sollte jetzt reagieren.

Answer 2

Sie haben dem Browser mitgeteilt, dass sich dieses SVG wie ein Bild verhalten soll, das genau 1315 Pixel breit und 65 Pixel hoch ist. Erwägen Sie stattdessen, die expliziten Attribute width und height zu entfernen, indem Sie das Attribut viewBox verwenden, um die genauen Abmessungen des internen SVG-Bilds zu definieren und das SVG-Bild mithilfe von CSS in Ihre Seite einzufügen.

Das XML sieht so aus, als wäre es in einem Programm erstellt worden (und nicht von Hand), also würde ich zuerst irgendwo im Programm nach einer "View Box" suchen. Wenn Sie dieses SVG-XML manuell eingeben, lesen Sie MDN's discussion of the viewBox attribute.