Om onverwachte ruimte rond een SVG use instantie te verwijderen, identificeer of deze afkomstig is uit de bron viewBox, aspect-ratio fitting, of de omringende CSS line box. Deze gids laat zien hoe je elke oorzaak kunt diagnosticeren en oplossen terwijl de plaatsingscoördinaten voorspelbaar blijven.

De taak is een kleine aanpassing van een desktop-webpagina: positioneer een herbruikbare vorm precies binnen een SVG, en zorg daarna dat de omringende HTML-layout zoals bedoeld past. Je kunt de voorbeelden volgen in een platte-teksteditor op je Mac en het opgeslagen HTML-bestand openen in een actuele desktop-browser.

Welk coördinatensysteem bepaalt de ruimte?

Er zijn drie grenzen om te inspecteren: de CSS-box van het äußere SVG-element, de viewport die gebruikt wordt voor een gerefereerd symbool, en de daadwerkelijke vorm binnen dat symbool. De W3C maakt expliciet onderscheid tussen een SVG-viewport en de CSS-viewport van de browser. Een viewBox projecteert SVG-gebruikerscoördinaten op een SVG-viewport; het beschrijft niet het browservenster. Coordinate Systems, Transformations and Units — SVG 2

Bijvoorbeeld, x="20" op een use element levert een offset in het SVG-coördinatensysteem. Dit betekent niet 20 CSS-pixels vanaf de linkerkant van het browservenster. Schaling en transformaties van voorouders kunnen veranderen waar die offset op de pagina verschijnt. De SVG-specificatie beschrijft use positionering als een extra translatie, met gedrag verschillend van CSS-boxlayout. Document Structure — SVG 2

Begin met deze beslissingstabel. Het is een diagnostische reeks afgeleid van de gedocumenteerde layoutmechanismen, in plaats van een lijst met uitwisselbare oplossingen.

Wat je observeert Wat eerst te inspecteren Waarschijnlijke correctie
Een smalle strook onder de gehele SVG Inline-opmaak en de line-height van de ouder Maak de SVG een zelfstandig blok-element, of pas de inline-uitlijning aan
Lege ruimte binnen elk herhaald graphic Vormcoördinaten versus de viewBox van het symbool Verstijf de brongrenzen als de inset onbedoeld is
Extra ruimte aan twee kanten van een symbool-instantie Instantie-afmetingen versus de viewBox ratio Match de ratios of kies een bewuste fitting policy
Correcte lokale plaatsing maar verkeerde pagina-positie SVG-gebruikseenheden versus browserviewport-coördinaten Converteer coördinaten voordat je x en y toewijst
Het wijzigen van instantie-afmetingen doet niets Het element dat getarget wordt door href Gebruik een viewport-definierend symbool voor fitting, of transformeer de geometrie

Reproduceer de gap met een compleet lokaal voorbeeld

Sla het volgende complete document op als svg-spacing.html in een platte-teksteditor, en open het in je browser. Het gebruikt alleen synthetische labels en rechthoeken, zonder bibliotheken of externe bestanden. De bleke rechthoeken markeren de bedoelde instantie-viewports; de donkerdere rechthoeken zijn de herbruikte artwork.

<!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>

Beide instanties stellen hun afmetingen expliciet in. Dit voorkomt dat er op impliciete groottegrootte wordt vertrouwd tijdens het onderzoeken van de gap. MDN documenteert use als hergebruik van gerefereerde SVG-content en merkt op dat de width en height van invloed zijn op fitting wanneer het doel een SVG of symbool is met een viewBox. Het voorbeeld gebruikt het huidige href attribuut. MDN: use

Bereken waar de eerste rechthoek daadwerkelijk begint

De eerste bron heeft een 100-op-100 viewBox, maar de rechthoek bezit alleen coördinaten 20 tot 80 in elke richting. De gevraagde instantie-viewport is 120 bij 60. Met de standaard xMidYMid meet fitting is de schaal de kleinste van 120 / 100 en 60 / 100: 0.6. De geschaalde viewBox beslaat 60 bij 60, wat 30 eenheden aan elke horizontale kant overlaat. Dit volgt het viewport-transformatie-algoritme van de W3C. SVG 2: Computing the equivalent transform of an SVG viewport

Voor deze illustratoire invoeren begint de getekende rechthoek op 20 + 30 + 20 × 0.6 = 62 horizontaal en 20 + 20 × 0.6 = 32 verticaal. De grootte is 60 × 0.6 = 36 in elke richting. De rekenkunde is gecontroleerd met een kleine deterministische berekening; dit zijn berekende waarden, geen metingen uit een browsertest.

De tweede instantie verandert twee onafhankelijke invoeren: de brongrenzen worden 20 20 60 60, en de instantie-viewport wordt 60 bij 60. De rechthoek vult dus die viewport en begint op SVG-coördinaat (20, 110). Om de oorzaken zelf te isoleren, verander maar één invoer per keer.

Hoe verwijder je ruimte binnen de instantie?

Corrigeer onbedoelde ruimte in de brongrenzen

Een viewBox bevat vier getallen: minimum x, minimum y, breedte en hoogte. De oorsprong hoeft niet nul te zijn. In het voorbeeld beschrijft viewBox="20 20 60 60" de bestaande grenzen van de rechthoek zonder de geometrie te herschrijven. MDN: viewBox

Voordat je een echte graphic verfijnt, beslis of de inset bedoeld is. Een set herbruikbare vormen kan een gemeenschappelijk coördinatenframe delen zodat hun visuele groottes en posities consistent blijven. Het onafhankelijk verfijnen van elk symbool kan die relaties veranderen. Behoud gedeelde grenzen als die consistentie onderdeel is van het ontwerp.

Voor geometrie-inspectie rapporteert getBBox() grenzen in SVG-gebruikerscoördinaten. Standaard sluit het strokes en markers uit, en het rekent niet met transformaties die op het doelelement of zijn voorouders worden toegepast. Een fill-only bounding box is daarom onvoldoende bewijs voor het bijsnijden van gestroke of getransformeerde artwork. MDN: SVGGraphicsElement getBBox()

Kies hoe niet-matchende aspect ratios moeten passen

Zelfs strak begrensde artwork kan omringende ruimte hebben wanneer een vierkante bron in een brede viewport wordt gefit. Kies het beleid volgens het gewenste resultaat. Pas preserveAspectRatio toe op het gerefereerde symbool voor de interne fitting, of op de outer SVG bij het diagnosticeren van de outer coordinate mapping. MDN: preserveAspectRatio

Keuze Resultaat en voorwaarde
Matchende bron- en viewport-ratio's Vermijdt aspect-ratio fitting ruimte terwijl proporties behouden blijven
xMidYMid meet Toont de hele viewBox, gecentreerd; niet-matchende ratio's laten ruimte over
xMinYMin meet Verplaatst de gefitte viewBox naar linksboven; overgebleven ruimte blijft bestaan
none Staat non-uniforme schaling toe; een vierkant kan een rechthoek worden
xMidYMid slice Dekkt de viewport, maar sommige broncontent reikt erbuiten; clipping bepaalt zichtbaarheid

Het wijzigen van de uitlijning verplaatst de fitting-ruimte; het verwijdert geen inset die al in de brongeometrie is gecodeerd. Evenzo is slice ongeschikt wanneer alle broncontent binnen de viewport moet blijven. Deze onderschieden volgen de definities van MDN voor alignment, meet, slice, en non-uniforme fitting. MDN: preserveAspectRatio

Controleer het referentiedoel wanneer afmetingen ondoeltreffend lijken

Een gewone groep of pad krijgt geen fitting viewport alleen omdat een use element ernaar verwijst. De W3C stelt dat instantie width en height geen effect hebben wanneer het gerefereerde element geen nieuwe viewport instelt. Voor voorspelbare per-instantie fitting, plaats de herbruikbare geometrie in een symbool met expliciete grenzen, zoals hierboven. Voor directe geometrische schaling, gebruik een transformatie en reken met het effect op plaatsing. SVG 2: Layout of re-used graphics

Hoe verwijder je de strook onder de outer SVG?

Een gat buiten de SVG kan voortkomen uit HTML inline formatting. WHATWG staat SVG toe in phrasing content; de omringende pagina kan het daardoor naast tekst plaatsen. CSS line boxes bevatten font metrics boven en onder de baseline, zodat een inline graphic zichtbare ruimte onder zijn box kan laten. HTML Standard: SVG, CSS 2: Line height calculations

Het complete voorbeeld stelt al display: block in op #canvas, wat die SVG uit de inline line-box participatie haalt. Voor een zelfstandige tekening, behoud die regel. Om het mechanisme te onderzoeken, verander het tijdelijk naar display: inline en inspecteer de omringende lijn.

Voor een SVG die naast tekst moet blijven, probeer vertical-align: bottom op de outer SVG en controleer de resulterende tekstuitlijning. Deze eigenschap lijnt een inline-level box uit binnen zijn lijn; het verandert geen symboolgrenzen of interne fitting. Andere content en de line-height van de ouder kunnen nog steeds de totale hoogte van de lijn bepalen. MDN: vertical-align

Behandel deze CSS-declaraties als alternatieven voor de outer SVG, niet als cumulatieve fixes om op elke instantie te plakken:

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

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

Wat als je coördinaten afkomstig zijn van de browserviewport?

getBoundingClientRect() rapporteert de positie van een element ten opzichte van de browserviewport in CSS-pixels. De positie verandert naarmate de pagina scrolt. Deze waarden behoren tot een andere ruimte dan SVG-gebruikerscoördinaten, dus het direct kopiëren van de left en top in de x en y van een instantie is over het algemeen onjuist. MDN: Element getBoundingClientRect()

Gebruik een coördinatentransformatie wanneer de invoer een browserviewport-punt is. getScreenCTM() levert de SVG-transformatiematrix, en het toepassen van de inverse zet het punt terug in de lokale coördinaten van het gekozen element. De matrixTransform() methode van een punt voert de conversie uit. MDN: getScreenCTM(), MDN: matrixTransform()

Het volgende console-snippet is een optionele uitbreiding van het complete document hierboven. Het converteert het browserviewport-punt (100, 150) in de gebruikerscoördinaten van de outer SVG en verplaatst de strak begrensde instantie daarheen. Het gaat ervan uit dat de ongetransformeerde instantie van het voorbeeld een direct kind van die SVG blijft.

(() => {
  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));
})();

De controle op eindige getallen is belangrijk omdat een niet-inverteerbare matrix NaN-componenten produceert. Herbereken de matrix bij het converteren van een nieuw punt na layout- of scrollwijzigingen. Als je instantie in een getransformeerde groep zit, converteer dan naar het coördinatensysteem van die oudergroep. Dit snippet is geïnspecteerd tegen de API-documentatie; het werd niet in een browser uitgevoerd tijdens het onderzoek. MDN: DOMMatrixReadOnly inverse()

Eindig met het apart controleren van de drie grenzen: de outer SVG box, de gefitte viewport van het symbool, en de eigen grenzen van de artwork. Corrigeer de grens die de ongewenste ruimte introduceert, en bevestig het resultaat bij de bedoelde paginagrootte. Dat geeft je voorspelbare plaatsing zonder te compenseren voor een onverklaarde gap met willekeurige offsets.

Bronnen