Kann ich ein SVG-Bild als div-hintergrund mit JavaScript SVG library?

In eine HTML-Seite, ich will ein SVG-Bild als hintergrund in einem div element, mit einem pre element mit text auf der Oberseite von ihm (dem hintergrund). Das Hintergrundbild sollte die Skala mit dem mit div, bei gleichbleibendem Seitenverhältnis.

Kann ich diese Aufgabe mit einem der SVG-JavaScript-Bibliotheken, wie jQuery SVG /Raphaël /svgweb?

Die Art der Struktur, ich würde gerne ein Hintergrundbild hinzufügen:

<div>
  <pre>Some text...</pre>
</div>

Welche Browser Sie unterstützen müssen, die meisten nur Unterstützung für die Verwendung von SVG als background-image in den letzten 12 Monaten oder so.
Im moment bin ich konzentriert auf IE9, Aktueller Chrome und der aktuelle Firefox. Ich habe nicht in der Lage, weder mit dem IE9 noch Chrome zeigen, SVG als background-image allerdings noch nicht 🙁 Ersetzen Sie .svg mit .png-und es funktioniert.
Ihre Frage macht es klingen wie Sie wollen generieren der SVG mit JavaScript, und dann verwenden Sie es als hintergrund. Ist das so, oder haben Sie nur wollen, um eine Referenz zu einem vorhandenen SVG-Datei gehostet wird als eigenständige Datei und verwenden es als hintergrund?
Ich möchte zum laden einer vorhandenen SVG-Bild.

InformationsquelleAutor aknuds1 | 2011-09-05

5

Können Sie eine SVG-Grafik als CSS-hintergrund, die Sie nur wollen, um Unterstützung von aktuellen Browsern, verwenden Sie background-size um das Bild zu skalieren und das Seitenverhältnis beibehalten. Hier das Bild wird direkt auf das pre nur zu zeigen:
```
pre {
    outline: 2px dashed black;
    padding: 1em;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
```
Wenn Sie unterstützen möchten, IE8 und FF3.6 dann werden Sie zu greifen, zu absolut positionierten Elementen, wie andrewmu schlägt.

Ich werde versuchen, dies morgen.
Ich habe jetzt gefunden, dass der Grund dafür, dass SVG nicht für mich arbeiten, wie background-image ist, dass der Visual Studio development server stellt die SVG mit dem MIME-Typ "application/octet-stream'. Wenn ich den Konqi SVG-wikimedia auf der anderen Seite, die SVG-gerendert wird in den browser 🙁 Ist das ein bekanntes problem? Eine Idee, wie man die Kraft die richtige portion von SVGs?
Welche version von Visual Studio/.Net/IIS? In 2010/4/7.5 fügen Sie ein mimeMap im web.config. In 2008/3.5/6, müssen Sie Sie konfigurieren unter HTTP-Header in IIS-Verwaltung.
Ich verwende Visual Studio 2010 Ultimate/.NET 4.0. Ich bin nicht mit IIS auf diesem dev-box. Macht den VS-dev-server unterstützen die mimeMap-Einstellung oder ähnliches?
Ich bin mir nicht sicher, ich habe es nur verwendet mit IIS, versuchen Sie es und sehen.

InformationsquelleAutor robertc
2

Konnte man immer zu betrügen und verwenden Sie position: absolute zwei divs an der gleichen Stelle.

InformationsquelleAutor andrewmu
0

~~SVG-Bilder sind Teil der DOM-Sie können nicht ein div-hintergrund, stattdessen sind Sie ein element wie ein div-Element.~~

~~Konnte Sie ein SVG-Bild hinter einem transparenten div, um die illusion von einem hintergrund. Diese beinhaltet nur die Setzung Ihrer SVG und den Inhalt in der richtigen Stelle.~~

~~Skalierung, die Sie verwenden sollten einige Mathematik, um das Seitenverhältnis beizubehalten, sollte Recht einfach sein, das Wort Verhältnis beteiligt ist. Das wäre ein Hinweis, wie das zu tun.~~

BEARBEITEN

Sieht es aus wie ich war falsch
http://www.broken-links.com/2010/06/08/using-svg-in-background-image/ es kann ein hintergrund.

Könnten Sie einen überblick über Ihre vorgeschlagene Lösung? Könnte man die SVG-Skala mit dem mit div?
Ich fügte hinzu, dass. Wie implementieren Sie es ändern können von dem, was Sie eigentlich erreichen wollen.
Empfehlen Sie eine bestimmte Bibliothek?
Ich wie raphael, aber wieder, es hängt wirklich davon ab, was Sie brauchen
Ich denke, ich bräuchte ein paar Ratschläge, wie man die SVG und die transparente div element auf der jeweils anderen, innerhalb der mit div.

InformationsquelleAutor austinbv

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.