Mein Svg-Kreis wiederholt Bildhintergrund

Was mache ich falsch? Der Hintergrund wird nicht richtig eingestellt.Mein Svg-Kreis wiederholt Bildhintergrund

<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="1101px" height="617px" viewBox="0 0 1101 617" enable-background="new 0 0 1101 617" xml:space="preserve"> 
     <defs> 
     <pattern id="image" patternUnits="userSpaceOnUse" height="150" width="150"> 
      <image x="30" y="0" height="150" width="150" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image> 
     </pattern> 
     </defs> 

    <circle fill="url(#image)" stroke="#676467" stroke-width="3" stroke-miterlimit="10" cx="186.051" cy="489.94" r="63.29"/> 
</svg>

Probe: http://prntscr.com/amjogg

Quelle

2016-03-31 justdee

Können Sie erklären, warum Ihr Svg 1101x617 sein muss? Wenn ich die Höhe und Breite des Svg an das Bild anpasse und den Kreis um die Hälfte dieser Werte versetze, richtet sich alles nach: http://codepen.io/angeliquejw/pen/RaLWZQ?editors=1000 – Angelique

Sie verwenden das Bild als Füllmuster, so dass es nicht oder etwas zu dehnen. Sie verwenden x und y im Bild, um die Bildposition im Muster festzulegen, die sozusagen eine Füllung im Muster festlegen kann. Dann wird das Muster angewendet.

In Ihrem Fall haben Sie ein 150x150 Muster mit einem 150x150 Bild, das 30 Pixel nach rechts versetzt ist, so dass das Muster wie 120 Pixel Bild mit einem 30 Pixel weißen Padding auf der linken Seite aussieht.

Ohne zu wissen, was Ihre Absicht war, weiß ich nicht, was "richtig" in Ihrem Kontext bedeutet.

Quelle

2016-03-31 20:36:47

Ich setze x auf 0. Von " richtig "Ich meine, das Bild ist zentriert. Wie kann ich xml stylen? Zum Beispiel, um das Bild 10px nach oben zu schieben. – justdee

Nun, für meinen Test habe ich Code hinzugefügt, um den Kreis zu bewegen. Der Hintergrund bewegt sich nicht mit dem Kreis. Die einzige Lösung, die ich sehe, ist, die Position des Musters so zu ändern, dass sie mit der des Kreises identisch ist (minus Radius). –

Ist das über CSS möglich? – justdee

Mein Svg-Kreis wiederholt Bildhintergrund

Antwort

Verwandte Themen