So machen Sie SVG "fill" handeln auf eine ähnliche Weise wie CSS "Hintergrund-Größe: cover"

Question

Ich versuche, ein SVG zu erstellen, die ein Bild mit einem bestimmten Pfad jedoch maskiert, wenn ich versuche, den Bereich zu füllen Mit einem Muster deckt das Bild nicht den gesamten Bereich ab.

Erwartet

Actual

In meinem defs ich definieren das Muster:

<pattern id="image" patternUnits="userSpaceOnUse" width="83.38" height="100" x="0" y="0"> 
    <image xlink:href="http://goo.gl/kVVuy1" x="0" y="0" width="100%" height="100%" /> 
</pattern> 

und die Form:

<path id="shape" d="M80.4,0c0,33.3,0,66.7,0,100c-26.8,0-53.6,0-80.4,0c0,0,0-0.1,0-0.1 c3.3-12.3,6.5-24.6,9.8-37c0.9-21,1.9-41.9,2.8-62.9C35.2,0,57.8,0,80.4,0z" /> 

dann schließe ich die Form:

<use xlink:href="#shape" fill="url(#image)"></use> 

Das Bild, das ich bin mit dynamisch Asset (Benutzer hochgeladen), jedoch kann ich die Dimensionen bei Bedarf erhalten.

Jede Lösung, die dieses Problem lösen würde, würde helfen, versuchte ich mit einer image mit einer Maske, aber hatte kein Glück. Solange das blaue Hintergrundmuster durchscheinen und kein Rot zu sehen ist, sollte mein Problem gelöst sein.

Hier ist das Arbeitsbeispiel: http://codepen.io/Godwin/pen/hazqA

Answer 1

Um dies zu beheben, fügen Sie ein entsprechendes preserveAspectRatio Attribut auf die <image> in Ihrem <pattern> ihm zu sagen, dass Sie das Bild wollen gezoomt und in Scheiben geschnitten werden.

<pattern id="image" patternUnits="userSpaceOnUse" width="83.38" height="100" x="0" y="0"> 
    <image xlink:href="http://goo.gl/kVVuy1" 
     x="0" y="0" width="100%" height="100%" 
     preserveAspectRatio="xMinYMin slice"/> 
</pattern> 

Demo here

Answer 2

Wenn background-position als background-size: cover; auch benötigt wird

preserveAspectRatio="xMidYMid slice" // der Bildmitte alle Optionen

Dieser Link für die preserveAspectRatio Attribut zur Verfügung hat. Und kann innerhalb des Musters mit Zentrieren des Bildes helfen

All Options