Ta reda på om det oväntade mellanrummet runt en SVG use-instans kommer från källans viewBox, anpassning efter bildförhållande eller den omgivande CSS-radrutan för att ta bort det. Den här guiden visar hur du diagnostiserar och åtgärdar varje orsak samtidigt som du behåller förutsägbara placeringskoordinater.

Uppgiften är en liten redigering av en webbsida på datorn: placera en återanvändbar form exakt inuti en SVG och anpassa sedan den omgivande HTML-layouten efter behov. Du kan följa exemplen i en vanlig textredigerare på din Mac och öppna den sparade HTML-filen i en aktuell webbläsare på datorn.

Vilket koordinatsystem styr mellanrummet?

Det finns tre gränser att undersöka: det yttre SVG-elementets CSS-ruta, visningsområdet som används för en refererad symbol och den faktiska formen inuti symbolen. W3C skiljer uttryckligen mellan ett SVG-visningsområde och webbläsarens CSS-visningsområde. En viewBox mappar SVG-användarkoordinater till ett SVG-visningsområde; den beskriver inte webbläsarfönstret. Koordinatsystem, transformationer och enheter — SVG 2

Exempelvis anger x="20" på ett use-element en förskjutning i dess SVG-koordinatsystem. Det betyder inte 20 CSS-pixlar från webbläsarfönstrets vänsterkant. Skalning och transformationer på överordnade element kan ändra var den förskjutningen hamnar på sidan. SVG-specifikationen beskriver positionering med use som en ytterligare förflyttning, med ett beteende som skiljer sig från CSS-rutlayout. Dokumentstruktur — SVG 2

Börja med den här beslutstabellen. Den visar en diagnostisk ordning som bygger på dokumenterade layoutmekanismer, inte en lista med utbytbara lösningar.

Vad du ser Vad du bör undersöka först Trolig åtgärd
En smal remsa under hela SVG-elementet Inline-formatering och det överordnade elementets radhöjd Gör en fristående SVG till ett blockelement eller justera dess inline-justering
Tomt utrymme inuti varje upprepad grafik Formens koordinater jämfört med symbolens viewBox Tighta till källans gränser om indraget inte är avsiktligt
Extra utrymme på två sidor av en symbolinstans Instansens mått jämfört med förhållandet i viewBox Matcha förhållandena eller välj en avsiktlig anpassningsmetod
Korrekt lokal placering men fel position på sidan SVG-användarenheter jämfört med webbläsarens visningsområdeskoordinater Konvertera koordinaterna innan du anger x och y
Ändrade instansmått gör ingen skillnad Elementet som href riktar sig mot Använd en symbol som definierar ett visningsområde för anpassning eller transformera geometrin

Återskapa mellanrummet med ett komplett lokalt exempel

Spara följande kompletta dokument som svg-spacing.html i en vanlig textredigerare och öppna det sedan i webbläsaren. Det använder endast syntetiska etiketter och rektanglar, utan bibliotek eller externa filer. De ljusa rektanglarna markerar de avsedda instansvisningsområdena; de mörkare rektanglarna är den återanvända grafiken.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SVG spacing example</title>
  <style>
    body {
      margin: 24px;
      font: 16px system-ui, sans-serif;
    }
    #canvas {
      display: block;
      width: 320px;
      height: 200px;
      outline: 1px solid #687580;
      background: #fff;
    }
    .viewport-guide { fill: #e4edf2; }
    .artwork { fill: #356b8c; }
    text { fill: #253744; font-size: 14px; }
  </style>
</head>
<body>
  <p>Two instances with different source bounds and fitting dimensions.</p>
  <svg id="canvas" xmlns="http://www.w3.org/2000/svg"
       width="320" height="200" viewBox="0 0 320 200"
       role="img" aria-labelledby="drawing-title">
    <title id="drawing-title">Padded and tightly fitted rectangles</title>
    <defs>
      <symbol id="padded" viewBox="0 0 100 100">
        <rect id="source-shape" class="artwork"
              x="20" y="20" width="60" height="60" />
      </symbol>
      <symbol id="tight" viewBox="20 20 60 60">
        <rect class="artwork"
              x="20" y="20" width="60" height="60" />
      </symbol>
    </defs>

    <rect class="viewport-guide"
          x="20" y="20" width="120" height="60" />
    <use href="#padded" x="20" y="20" width="120" height="60" />
    <text x="160" y="55">Padded source</text>

    <rect class="viewport-guide"
          x="20" y="110" width="60" height="60" />
    <use id="tight-instance" href="#tight"
         x="20" y="110" width="60" height="60" />
    <text x="110" y="145">Tight source</text>
  </svg>
</body>
</html>

Båda instanserna anger uttryckligen sina mått. Då behöver du inte förlita dig på implicit storlek när du undersöker mellanrummet. MDN beskriver use som ett sätt att återanvända refererat SVG-innehåll och påpekar att width och height påverkar anpassningen när målet är en SVG eller symbol med en viewBox. Exemplet använder det aktuella attributet href. MDN: use

Beräkna var den första rektangeln faktiskt börjar

Den första källan har en viewBox på 100 gånger 100, men rektangeln upptar endast koordinaterna 20 till 80 i vardera riktningen. Det begärda instansvisningsområdet är 120 gånger 60. Med standardanpassningen xMidYMid meet är skalningsfaktorn det mindre av 120 / 100 och 60 / 100: 0,6. Den skalade viewBoxen upptar 60 gånger 60, vilket lämnar 30 enheter på vardera sidan horisontellt. Detta följer W3C:s algoritm för transformation av visningsområden. SVG 2: Beräkning av motsvarande transformation för ett SVG-visningsområde

Med dessa exempelvärden börjar den målade rektangeln vid 20 + 30 + 20 × 0.6 = 62 horisontellt och 20 + 20 × 0.6 = 32 vertikalt. Den är 60 × 0.6 = 36 i vardera riktningen. Beräkningen kontrollerades med en liten deterministisk uträkning; värdena är beräknade och inte uppmätta i ett webbläsartest.

Den andra instansen ändrar två oberoende värden: källans gränser blir 20 20 60 60 och instansens visningsområde blir 60 gånger 60. Rektangeln fyller därför visningsområdet och börjar vid SVG-koordinaten (20, 110). Om du vill isolera orsakerna själv ändrar du bara ett värde i taget.

Hur tar du bort utrymme inuti instansen?

Åtgärda oavsiktligt utrymme i källans gränser

En viewBox innehåller fyra tal: minsta x, minsta y, bredd och höjd. Origo behöver inte vara noll. I exemplet beskriver viewBox="20 20 60 60" rektangelns befintliga gränser utan att ändra geometrin. MDN: viewBox

Innan du tajtar till en verklig grafik bör du avgöra om dess indrag är avsiktligt. En uppsättning återanvändbara former kan dela ett gemensamt koordinatsystem så att deras visuella storlekar och positioner förblir konsekventa. Om varje symbol tajtas till separat kan dessa förhållanden ändras. Behåll gemensamma gränser när konsekvensen är en del av designen.

För geometrisk inspektion rapporterar getBBox() gränser i SVG-användarkoordinater. Som standard utesluter den linjer och markörer, och den tar inte hänsyn till transformationer på målelementet eller dess överordnade element. En begränsningsruta som endast omfattar fyllningen räcker därför inte som underlag för att beskära grafik med linjer eller transformationer. MDN: SVGGraphicsElement getBBox()

Välj hur olika bildförhållanden ska anpassas

Även grafik med täta gränser kan få omgivande utrymme när en kvadratisk källa anpassas till ett brett visningsområde. Välj metod utifrån önskat resultat. Använd preserveAspectRatio på den refererade symbolen för dess interna anpassning eller på den yttre SVG:n när du undersöker den yttre koordinatmappningen. MDN: preserveAspectRatio

Val Resultat och villkor
Matchande förhållanden mellan källa och visningsområde Undviker utrymme från anpassning efter bildförhållande och behåller proportionerna
xMidYMid meet Visar hela viewBoxen centrerad; olika förhållanden lämnar utrymme
xMinYMin meet Flyttar den anpassade viewBoxen mot det övre vänstra hörnet; kvarvarande utrymme finns ändå
none Tillåter ojämn skalning; en kvadrat kan bli en rektangel
xMidYMid slice Täcker visningsområdet, men en del av källinnehållet hamnar utanför det; beskärningen avgör vad som syns

Om du ändrar justeringen flyttas anpassningsutrymmet; ett indrag som redan finns i källgeometrin försvinner inte. På samma sätt är slice olämpligt när allt källinnehåll måste rymmas i visningsområdet. Dessa skillnader följer MDN:s definitioner av justering, meet, slice och ojämn anpassning. MDN: preserveAspectRatio

Kontrollera referensmålet om måtten verkar sakna effekt

En vanlig grupp eller bana får inget anpassningsvisningsområde bara för att ett use-element refererar till den. W3C anger att instansens width och height inte har någon effekt när det refererade elementet inte skapar ett nytt visningsområde. För förutsägbar anpassning per instans placerar du den återanvändbara geometrin i en symbol med uttryckliga gränser, som ovan. Om geometrin ska skalas direkt använder du en transformation och tar hänsyn till dess påverkan på placeringen. SVG 2: Layout för återanvänd grafik

Hur tar du bort remsan under den yttre SVG:n?

Ett mellanrum utanför SVG:n kan bero på inline-formatering i HTML. WHATWG tillåter SVG i fras-innehåll; den omgivande sidan kan därför placera den intill text. CSS-radrutor omfattar teckensnittsmått ovanför och under baslinjen, så en inline-grafik kan lämna synligt utrymme under sin ruta. HTML-standarden: SVG, CSS 2: Beräkningar av radhöjd

Det fullständiga exemplet anger redan display: block för #canvas, vilket gör att SVG:n inte deltar i inline-radrutan. Behåll den regeln för en fristående teckning. Om du vill undersöka mekanismen ändrar du den tillfälligt till display: inline och granskar den omgivande raden.

Om en SVG ska ligga kvar bredvid text kan du prova vertical-align: bottom på den yttre SVG:n och kontrollera textens justering efteråt. Egenskapen justerar en ruta på inline-nivå i förhållande till dess rad; den ändrar inte symbolens gränser eller den interna anpassningen. Annat innehåll och det överordnade elementets radhöjd kan fortfarande påverka radens totala höjd. MDN: vertical-align

Behandla dessa CSS-deklarationer som alternativ för den yttre SVG:n, inte som åtgärder som ska läggas till kumulativt för varje instans:

/* Standalone drawing */
#canvas {
  display: block;
}

/* Alternative when the drawing must stay inline */
/*
#canvas {
  display: inline;
  vertical-align: bottom;
}
*/

Vad gör du om koordinaterna kommer från webbläsarens visningsområde?

getBoundingClientRect() rapporterar ett elements position i CSS-pixlar i förhållande till webbläsarens visningsområde. Positionen ändras när sidan rullas. Värdena tillhör ett annat koordinatsystem än SVG-användarkoordinater, så det är i regel fel att kopiera left och top direkt till en instans x och y. MDN: Element getBoundingClientRect()

Använd en koordinattransformation när indata är en punkt i webbläsarens visningsområde. getScreenCTM() tillhandahåller SVG-transformationens matris, och dess invers konverterar punkten tillbaka till det valda elementets lokala koordinater. Metoden matrixTransform() för en punkt utför konverteringen. MDN: getScreenCTM(), MDN: matrixTransform()

Följande konsolutdrag är ett frivilligt tillägg till det fullständiga dokumentet ovan. Det konverterar punkten (100, 150) i webbläsarens visningsområde till användarkoordinater i den yttre SVG:n och flyttar den tätt avgränsade instansen dit. Det förutsätter att exemplets otransformerade instans fortfarande är ett direkt underordnat element till den SVG:n.

(() => {
  const canvas = document.getElementById("canvas");
  const instance = document.getElementById("tight-instance");
  if (!canvas || !instance) {
    throw new Error("Open the complete SVG spacing example first.");
  }

  const matrix = canvas.getScreenCTM();
  if (!matrix) {
    throw new Error("The SVG coordinate matrix is unavailable.");
  }

  const viewportPoint = new DOMPoint(100, 150);
  const localPoint = viewportPoint.matrixTransform(matrix.inverse());
  if (!Number.isFinite(localPoint.x) || !Number.isFinite(localPoint.y)) {
    throw new Error("The SVG coordinate matrix cannot be inverted.");
  }

  instance.setAttribute("x", String(localPoint.x));
  instance.setAttribute("y", String(localPoint.y));
})();

Kontrollen av ändliga tal är viktig eftersom en icke-inverterbar matris ger komponenter med värdet NaN. Beräkna matrisen på nytt när du konverterar en ny punkt efter att layouten eller rullningen har ändrats. Om instansen ligger inuti en transformerad grupp konverterar du till den överordnade gruppens koordinatsystem i stället. Det här kodutdraget granskades mot API-dokumentationen; det kördes inte i en webbläsare under efterforskningen. MDN: DOMMatrixReadOnly inverse()

Avsluta med att kontrollera de tre gränserna var för sig: den yttre SVG-rutan, symbolens anpassade visningsområde och grafikens egna gränser. Åtgärda den gräns som skapar det oönskade utrymmet och bekräfta sedan resultatet vid den avsedda sidstorleken. Då får du en förutsägbar placering utan att kompensera för ett oförklarat mellanrum med godtyckliga förskjutningar.

Källor