Mehrere preserveAspectRatio in Svg?

Ich suche eine SVG füllen einen bestimmten Platz in meinem Layout, so scheint preserveAspectRatio="none" wie eine gute erste Annäherung.Mehrere preserveAspectRatio in Svg?

Allerdings, in der Svg, gibt es eine Maske, die ich nicht wollen dehnen/verformen. Vielmehr sollte es 100% der Breite einnehmen, wobei die Höhe entsprechend ihrem Verhältnis skaliert werden sollte. Die zwei Bilder zeigen das Verhalten der Maske, wenn sich das Eltern-SVG in Quer- oder Hochformat befindet. (Hinweis: das Grau im Bild ist der Rest des <svg>, der sich strecken sollte, um zu passen)

Kann die Maske ihre eigenen aspectRatio Einstellungen haben? Gibt es einen besseren Weg, dies zu erreichen? Oder ist es überhaupt möglich?

`` `

<!-- this should scale according to its bounding parent --> 
<svg class="fix" viewbox="0 0 2880 1620" preserveAspectRatio="none..?"> 

    <!-- this should scale according to some intrinsic ratio --> 
    <mask id="mask" 
     maskUnits="userSpaceOnUse" 
     maskContentUnits="userSpaceOnUse"> 
    <rect fill="white" x="0" y="0" width="2880" height="1620" /> 
    <path fill="black" d="M57.59,60h409c344.17,.... ...."/> 
    </mask> 

    <rect mask="url(#mask)" x="0" y="0" width="100%" height="100%" /> 

</svg>

` ``

edit: mit mask-image statt nur mask möglich scheint (wie es zusätzliche Positionierungsmöglichkeiten hat), aber dies tut scheint nicht mit SVG-Elementen zu arbeiten.

Quelle

2017-07-09 wes

zu Ihrer Frage Nr. Alles in der SVG wird von der 'preserveAspectRatio' beeinflusst. Warum verwenden Sie auch 'preserveAspectRatio =" none "'? Das Verhalten, das Sie in Ihren Modellen veranschaulichen, ist das Verhalten des standardmäßigen 'preserveAspectRatio' ('" xMidYMid meet "'). –

Hey Paul - Ja, dachte ich, danke. Ich benutze preserveAspectRatio = none, weil ich wünsche, dass der Rest der SVG in einem beliebigen Raum skaliert/gedehnt wird; aber die Maske sollte nicht drin sein. Nebenbei habe ich mit mehreren wes

Sie müssen preserveAspectRatio="none" nicht verwenden, damit das Rechteck und die Maske die Seite füllen. Erweitern Sie einfach die <rect> und <mask> über die Grenzen des SVG in alle Richtungen. Root <svg> Elemente haben overflow: visible standardmäßig, so dass das erweiterte Rect SVGs übergeordneten Container füllen wird - solange Sie natürlich weit genug verlängern.

<rect mask="url(#mask)" x="-1000%" y="-1000%" width="3000%" height="3000%" />

Ich habe 1000% hier verwendet, aber Sie können das einstellen, wenn Sie mehr oder weniger (als 10x) benötigen.

Und beachten Sie, dass wir nur die Standard-Standard SVG preserveAspectRatio verwenden. So erhalten wir immer noch die automatische Zentrierung und Skalierung des SVG.

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
svg { 
 
    width: 100vw; 
 
    height: 100vh; 
 
}

<svg viewbox="0 0 2880 1620"> 
 

 
    <!-- this should scale according to some intrinsic ratio --> 
 
    <mask id="mask" 
 
     maskUnits="userSpaceOnUse" 
 
     maskContentUnits="userSpaceOnUse" 
 
     x="-1000%" y="-1000%" width="3000%" height="3000%"> 
 
    <rect fill="white" x="-1000%" y="-1000%" width="3000%" height="3000%" /> 
 
    <circle cx="1440" cy="810" r="400" fill="black"/> 
 
    </mask> 
 

 
    <rect mask="url(#mask)" x="-1000%" y="-1000%" width="3000%" height="3000%" /> 
 

 
</svg>

Demo in fiddle format

Quelle

2017-07-10 13:32:56

ah, interessant zu lösen. Das ist eine Lösung, an die ich nie gedacht hätte, Prost! – wes

Mehrere preserveAspectRatio in Svg?

Antwort

Verwandte Themen