Wie man ein SVG rect-element ist das Hintergrundbild?

Erstellte ich eine SVG rect mit keith-wood jQuery SVG-plugin. Hier ist der code:

svg.graph._wrapper.rect(group, 0, 100, 40, 20,
                       {fill: 'ivory',
                        stroke: 'black',
                        strokeWidth : 2});

So, ich dachte, ich könnte Sie leicht ändern Sie die Füllung statt mit 'ivory', ich habe ihn an 'theImageIwantToUse'. Aber es scheint nicht zu funktionieren.

InformationsquelleAutor tmaster | 2012-05-24
  1. 10

    Können Sie Bilder einfügen, die in Ihrem svg durch die Verwendung der <image> element http://www.w3.org/TR/SVG/struct.html#ImageElement

    Eine entsprechende Funktion ist in dem plugin, das Sie erwähnt. 

    svg.image(parent, x, y, width, height, ref, settings)

    ( http://keith-wood.name/svg.html )

    Ich bezweifle, dass es möglich ist, verwenden Sie Kontur in einem Bild, so werden Sie zu zeichnen Sie ein Rechteck ohne Füllung zeichnen das Bild, um die genauen Ergebnisse, die Sie wollen.

    • Jubel, es hat geklappt.
    • Die performance dieser Lösung ist VIEL besser als die eine mit dem füllen - Attribut.
    InformationsquelleAutor toniedzwiedz
  2. 11

    Können Sie nicht, legen Sie ein externes Bild direkt als hintergrund zu SVG-Objekten.

    Stattdessen müssen Sie zunächst erstellen Sie eine patttern wie diese

    var ptn = svg.pattern(defs, "imgPattern", 0, 0, 100, 100, 0, 0, 10, 10, 
                      {patternUnits: "userSpaceOnUse"});
svg.image( ptn, 100, 50, 200, 200, "./theImageIwantToUse.png");

    und verwenden Sie diese Muster dann über die url() Funktion in das Attribut "ausfüllen"

    svg.graph._wrapper.rect(group, 0, 100, 40, 20,
                       {fill: 'url(#imgPattern)',
                        stroke: 'black',
                        strokeWidth : 2});
    InformationsquelleAutor Sirko
Schreibe einen Kommentar