Ajouter une image d'arrière-plan (.png) pour une SVG cercle de la forme

Est-ce possible? Ce qui suit est ce que j'ai essayé, mais il remplit complètement le cercle noir.

<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>
  • Haha il y en a beaucoup, je pense qu'ils se sentent forts se cachent derrière leurs ordinateurs. Bonne chance avec votre problème
  • Je n'ai pas downvote vous, mais peut-être que c'est parce que le code que vous avez posté est l'application d'une dropshadow, pas une image de remplissage!
  • Passons sur, le non-travail code pour le remplir est à l'écran. Lors de l'affichage de code d'essayer de le réduire au minimum.
  • Vous ne pouvez pas faire référence à un PNG directement à partir d'un remplissage ou le contour d'attribut pour le moment. Vous aurez à envelopper l'image dans un élément du motif et de définir la manière dont il convient de carrelage et de mise à l'échelle. Voir la réponse de Duopixel.
  • double possible de Remplir SVG élément de chemin avec un background-image
InformationsquelleAutor Tejen Shrestha | 2012-07-16
  1. 37

    Une image de fond pour un élément svg est atteint grâce à SVG Modèles...

    <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>
    • Il est possible de faire avec les filtres SVG trop, mais des tendances est la réponse naturelle.
    • Pouvons-nous cesser de reproduire png afficher en arrière-plan à l'aide de remplir. Dans ce cas, il va garder la réplication de l'image en arrière-plan. Est-il possible d'afficher un motif en une seule fois? Je ne veux pas de carrelage...
    • fermeture defs balise manquante
    • J'ai fermé la balise pour vous
    • Est-il possible d'arrêter la tendance à partir de la répétition, de l'avoir à l'échelle pour correspondre à la place?
    • Cette technique ne fonctionne pas du tout. Vous devez utiliser la méthode Teo Inke de l' answer. Et même alors, que des pauses lorsque vous essayez de le transformer en quelque sorte (c'est à dire de mise à l'échelle, etc).
    • Ce n'est pas de travail pour moi avec Firefox

    InformationsquelleAutor methodofaction
  2. 23

    Bien, je ne pouvais pas le faire fonctionner avec la accepté de répondre. Voilà comment j'ai fini par le faire:

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

    Si vous souhaitez personnaliser la taille, l'utiliser comme une échelle de référence:

    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>

    (Cette échelle travaille pour des carrés des images)

    • Même moi, je ne pouvais pas le faire fonctionner avec la accepté de répondre. Merci pour votre réponse.
    • Comment puis-je arrêter de le répéter? ce n'est pas le scalling properlly
    • Découvert que la clé de centrage mon image dans un cercle était de mettre en x et y attributs sur la <pattern> à la moitié de la largeur/hauteur ("x" ci-dessus). Je n'ai pas encore trouvé une explication pour pourquoi la <pattern>'s largeur/hauteur de dépasser l'image de dimensions pour éliminer les frontières (rembourrage?), mais cela a été mon expérience en tant que bien.
    InformationsquelleAutor Teo Inke
  3. 13

    Je sais que c'est une vieille question, mais j'ai utilisé un filtre permettant de superposer l'image. La solution ci-dessus ne fonctionne pas pour moi à cause de la mise à l'échelle et il semblait que les images en mosaïque. J'ai utilisé ce lieu, j'espère que ça aidera d'autres personnes.

    <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>
    • cela fonctionne, mais l'image est à venir dans le rectangle? cercle doit être entièrement remplis avec le bg de l'image.
    InformationsquelleAutor Arian Faurtosh
  4. 7

    L'Image de la répétition problème résolu avec une bonne explication (Grâce à AmeliaBR)

    TL;DR: Le concept de objectBoundingBox et preserveAspectRatio sont utilisés! 

    <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 Photon Khan
  5. 1

    C'est ma solution, les différences sont qu'il n'utilise pas le patternUnits="userSpaceOnUse" et que vous spécifiez la hauteur et la largeur de l'élément d'image.

    <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>
    • J'ai essayé votre solution mais il ne fonctionne pas pour moi. Je ne pouvais pas voir l'image. J'utilise le débogage et m'a montré l'image était en bonne position mais rien à l'écran et j'ai vérifié que mon image est une image valide.
    InformationsquelleAutor Lukeus_Maximus