Fügen Sie ein Hintergrundbild (.png) zu einer SVG-Kreisform hinzu

Ist das möglich? Das folgende ist, was ich versucht, aber es vollständig füllt den Kreis mit schwarz.

<svg id='vizMenu' width="700" height="660">
    <defs>
        <filter id="dropshadow" height="130%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
            <feOffset dx="0.5" dy="0.8" result="offsetblur"/> 
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <circle id='top' filter="url(#dropshadow)" cx="180" cy="120" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/>
    <circle id='bottom' filter="url(#dropshadow)" cx="500" cy="300" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/>
    <circle id='extra' filter="url(#dropshadow)" cx="180" cy="560" r="80" stroke="#2E2E2E" stroke-width="2" fill="#ffffff"/>
</svg>

Kommentar zu dem Problem

Haha es gibt viele von Ihnen, ich denke, Sie fühlen sich stark, versteckt hinter Ihren Computern. Viel Glück mit deinem problem Kommentarautor: Cleverbot

Ich habe nicht downvote Sie, aber vielleicht ist es, weil der code, den Sie geschrieben ist für die Anwendung des dropshadow, nicht ein Bild zu füllen! Kommentarautor: Duopixel

Nevermind, die nicht-funktionierenden code für das füllen offscreen ist. Beim posten von code, versuchen Sie es zu reduzieren auf das minimum. Kommentarautor: Duopixel

Sie können keine Referenz PNG direkt aus einer Fläche oder Kontur-Attribut im moment. Sie müssen wickeln Sie das Bild in ein Muster-element und definieren, wie es gekachelt werden soll und skaliert. Siehe die Antwort von Duopixel. Kommentarautor: Erik Dahlström

mögliche Duplikate von Füllen SVG-path-element mit background-image Kommentarautor: Erik Dahlström

InformationsquelleAutor der Frage Tejen Shrestha | 2012-07-16

Einem Bild füllen für ein svg-element wird erreicht durch SVG-Muster...

<svg width="700" height="660">
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
      <image x="0" y="0" xlink:href="url.png"></image>
    </pattern>
  </defs>
  <circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/>
</svg>

InformationsquelleAutor der Antwort Duopixel

Gut, ich konnte nicht damit es funktioniert mit der akzeptierten Antwort. Dies ist, wie ich landete, es zu tun:

<svg width="100" height="100">
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100">
      <image x="0" y="0" height="100" width="100" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
    </pattern>
  </defs>
  <circle id='top' cx="50" cy="50" r="50" fill="url(#image)"/>
</svg>

Wenn Sie möchten, passen Sie die Größe, verwenden Sie diese als scale-Referenz:

x = yourPreferredSize

<svg width=">2x" height=">2x">
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" height=">2x" width=">2x">
      <image x="0" y="0" height="2x" width="2x" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
    </pattern>
  </defs>
  <circle id='top' cx="x" cy="x" r="x" fill="url(#image)"/>
</svg>

(Dieser Stil funktioniert für quadratische Bilder)

InformationsquelleAutor der Antwort Teo Inke

12

Ich weiß, das ist eine alte Frage, aber ich verwendet einen filter, um die overlay-Bild. Die oben genannte Lösung hat bei mir nicht funktioniert, weil der Skalierung, und es schien, wie die Bilder, war gekachelt. Früher habe ich dies anstelle, ich hoffe, es anderen zu helfen, wie gut.
```
<svg width="700" height="660">
    <filter id="this_image" x="0%" y="0%" width="100%" height="100%">
        <feImage xlink:href="test_image.png"/>
    </filter>
    <circle filter="url(#this_image)" cx="180" cy="120" r="80" />
</svg>
```
InformationsquelleAutor der Antwort Arian Faurtosh

Bild Wiederholung, problem gelöst mit der richtigen Erklärung (Dank AmeliaBR)

TL;DR: das Konzept Der objectBoundingBox und preserveAspectRatio verwendet werden!

<svg height = "10%" width = "10%">
  <defs>
    <pattern id = "attachedImage" height = "100%" width = "100%"            
                   patternContentUnits = "objectBoundingBox">
       <image xlink:href = "url.png" preserveAspectRatio = "none" 
              width = "1" height = "1"/>
    </pattern>
  </defs>
<circle cx = "50%" cy = "50%" r = "35%" fill = "url(#attachedImage)"/>
</svg>

InformationsquelleAutor der Antwort Photon Khan

Dies ist meine Lösung, die Unterschiede sind, dass dies nicht der patternUnits="userSpaceOnUse" und geben Sie die gewünschte Breite und Höhe des image-element.

<defs>
    <pattern id="{some name}" x="0" y="0" width="1" height="1">
        <image href="{image url}" x="0" y="0" width="{desired width}" height="{desired height}"></image>
    </pattern>
</defs>

InformationsquelleAutor der Antwort Lukeus_Maximus

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.