Als «svg» getaggte Fragen

Scalable Vector Graphics (SVG) ist ein XML-basiertes zweidimensionales Vektorgrafikformat, das auch in HTML verwendet werden kann. Fügen Sie dieses Tag nicht hinzu, nur weil Ihr Projekt SVG verwendet. Fügen Sie stattdessen das Tag hinzu, wenn Ihre Frage entweder SVG betrifft oder eng damit zusammenhängt, z. B. wie Sie mit SVG etwas erreichen können.

11
Transparenter Text aus dem Hintergrund ausgeschnitten
Gibt es eine Möglichkeit , mit CSS einen transparenten Text aus einem Hintergrundeffekt wie dem im folgenden Bild herauszuschneiden ? Es wäre traurig, alle wertvollen SEOs zu verlieren, weil Bilder Text ersetzen. Ich habe zuerst an Schatten gedacht, aber ich kann nichts herausfinden ... Das Bild ist der Site-Hintergrund, ein …
90 css  svg  fonts  css-shapes 
4
Wie füge ich einer SVG-Grafik einen Tooltip hinzu?
Ich habe eine Reihe von SVG-Rechtecken (mit D3.js) und möchte beim Mouseover eine Nachricht anzeigen. Die Nachricht sollte von einem Feld umgeben sein, das als Hintergrund dient. Sie sollten beide perfekt zueinander und zum Rechteck (oben und zentriert) ausgerichtet sein. Was ist der beste Weg, dies zu tun? Ich habe …
8
Extrahieren von SVG aus Font Awesome
Ich möchte die SVG-Pfaddaten von Font Awesome- Glyphen abrufen, damit ich sie direkt als SVG in meinem HTML-Code verwenden kann. Ich dachte, es wäre so einfach wie das Kopieren und Einfügen der Pfaddaten aus fontawesome-webfont.svg , aber wenn ich es in meinem HTML verwende, werden alle Symbole verkehrt herum gerendert …
87 html  svg  font-awesome 
5
SVG-Symbole vs. PNG-Symbole auf modernen Websites
Ich frage mich, warum so wenige moderne Websites immer noch nur PNGs für Symbole verwenden (aber diese Annahme basiert nur auf meiner Beobachtung). Soweit ich weiß, sind die Hauptgründe für die Verwendung von PNGs gegenüber SVGs IE8 und dass SVG mehr CPU-Leistung verbraucht (aber ich glaube nicht, dass dies ein …
87 html  svg  icons 
7
So entfernen Sie zusätzlichen Speicherplatz unter svg im div-Element
Hier ist eine Illustration des Problems (getestet in Firefox und Chrome): <div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div> Führen Sie das Code-Snippet ausErgebnisse ausblendenErweitern Sie das Snippet Ansicht auf JSFiddle Beachten Sie den zusätzlichen redPlatz im unteren Bereich divunter dem Blau svg. Bereits versucht zu setzen paddingund marginvon beiden Elementen …
87 html  css  svg 
4
Unterstützen SVG-Dokumente benutzerdefinierte Datenattribute?
In HTML5 können Elemente beliebige Metadaten in XML-Attributen gespeichert haben, deren Namen mit data-z <p data-myid="123456">. Ist dieser Teil der SVG-Spezifikation auch? In der Praxis funktioniert diese Technik an vielen Stellen gut für SVG-Dokumente. Aber ich würde gerne wissen, ob es Teil der offiziellen SVG-Spezifikation ist oder nicht, da das …
7
Breite / Höhe des SVG-Elements abrufen
Was ist der richtige Weg, um die Abmessungen eines svgElements zu erhalten? http://jsfiddle.net/langdonx/Xkv3X/ Chrome 28: style x client 300x100 offset 300x100 IE 10: stylex client300x100 offsetundefinedxundefined FireFox 23: "style" "x" "client" "0x0" "offset" "undefinedxundefined" Es gibt Eigenschaften für Breite und Höhe svg1, die jedoch .width.baseVal.valuenur festgelegt werden, wenn ich die …
84 javascript  svg 
12
SVG abgerundete Ecke
Ich habe die folgende SVG: <svg> <g> <path id="k9ffd8001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#a0a700"></path> <path id="kb8000001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="url(#k9ffb0001)"></path> </g> …
3
So greifen Sie mit Javascript auf SVG-Elemente zu
Ich spiele mit SVG herum und hatte gehofft, ich könnte SVG-Dateien in Illustrator erstellen und mit Javascript auf Elemente zugreifen. Hier ist die SVG-Datei, die Illustrator startet (es scheint auch eine Menge Müll am Anfang der Datei hinzuzufügen, die ich entfernt habe). <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG …
3
Drehen Sie den Text der x-Achse in d3
Ich bin neu in der d3- und svg-Codierung und suche nach einer Möglichkeit, Text auf der xAxis eines Diagramms zu drehen. Mein Problem ist, dass die xAxis-Titel normalerweise länger sind als die Balken im Balkendiagramm. Daher möchte ich den Text so drehen, dass er vertikal (und nicht horizontal) unter der …
81 text  svg  transform  d3.js 
10
Aktualisieren des SVG-Element-Z-Index mit D3
Was ist ein effektiver Weg, um ein SVG-Element mithilfe der D3-Bibliothek an die Spitze der Z-Ordnung zu bringen? Mein spezielles Szenario ist ein Kreisdiagramm, das hervorhebt (durch Hinzufügen eines strokezu path), wenn sich die Maus über einem bestimmten Teil befindet. Der Codeblock zum Generieren meines Diagramms ist unten: svg.selectAll("path") .data(d) …
80 javascript  svg  d3.js 
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.