Bawię się SVG i miałem nadzieję, że uda mi się stworzyć pliki SVG w programie Illustrator i uzyskać dostęp do elementów za pomocą JavaScript.
Oto plik SVG, który uruchamia program Illustrator (wydaje się również, że dodaje ładunek śmieci na początku pliku, który usunąłem)
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="276.843px" height="233.242px" viewBox="0 0 276.843 233.242" enable-background="new 0 0 276.843 233.242"
xml:space="preserve">
<path id="delta" fill="#231F20" d="M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037
c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185
L34.074,86.094z"/>
<path id="cargo" fill="#DFB800" d="M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444,14.074
l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741
l-19.259-39.259L92.593,8.316L68.148,32.761z"/>
<polygon id="beta" fill="#35FF1F" points="86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 214.593,100.909
194.593,52.02 227.186,49.057 246.444,92.02 238.297,140.909 216.074,172.761 197.556,188.316 179.778,169.798 164.963,174.983
163.481,197.946 156.815,197.946 134.593,159.428 94.593,151.279 "/>
<path class="monkey" id="alpha" fill="#FD00FF" d="M96.315,4.354l42.963,5.185l18.519,42.222l71.852-8.148l20.74,46.667l-5.926,52.593
l-24.444,34.074l-25.185,15.555l-14.074-19.259l-8.889,2.964l-1.481,22.222l-14.074,2.963l-25.186,22.963l-74.074,4.444
l101.481,4.444c0,0,96.297-17.777,109.63-71.852S282.24,53.983,250.389,20.65S96.315,4.354,96.315,4.354z"/>
</svg>
Jak zapewne widzisz, każdy element ma identyfikator i miałem nadzieję, że będę mógł uzyskać dostęp do poszczególnych elementów za pomocą JavaScript, aby móc zmienić atrybut Fill i reagować na zdarzenia, takie jak kliknięcie.
HTML jest bardzo prosty
<!DOCTYPE html>
<html>
<head>
<title>SVG Illustrator Test</title>
</head>
<body>
<object data="alpha.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>
</body>
</html>
Myślę, że tak naprawdę są to dwa pytania.
Czy można to zrobić w ten sposób, w przeciwieństwie do czegoś takiego jak Raphael czy jQuery SVG.
Jeśli to możliwe, jaka jest technika?
AKTUALIZACJA
W tej chwili korzystałem z programu Illustrator do tworzenia pliku SVG i używam Raphaël JS do tworzenia ścieżek i po prostu kopiowania danych punktów z pliku SVG i wklejania ich do path()
funkcji. Tworzenie złożonych ścieżek, które mogą być potrzebne na mapie, poprzez ręczne kodowanie danych punktów jest (o ile mi wiadomo) zbyt skomplikowane.
źródło
document.getElementById("alphasvg").contentDocument
tonull
.contentDocument
mosty z kontekstu HTML do kontekstu SVGJeśli używasz jQuery, musisz poczekać
$(window).load
, ponieważ osadzony dokument SVG może nie zostać jeszcze załadowany pod adresem$(document).ready
$(window).load(function () { //alert("Document loaded, including graphics and embedded documents (like SVG)"); var a = document.getElementById("alphasvg"); //get the inner DOM of alpha.svg var svgDoc = a.contentDocument; //get the inner element by id var delta = svgDoc.getElementById("delta"); delta.addEventListener("mousedown", function(){ alert('hello world!')}, false); });
źródło
$('#alphasvg').load
zamiast$(window).load
. Umożliwi to zmianę atrybutudata
w locieJeśli używasz
<img>
tagu dla SVG, nie możesz manipulować jego zawartością (o ile wiem).Jak pokazuje zaakceptowana odpowiedź, użycie
<object>
jest opcją.Potrzebowałem tego ostatnio i użyłem go
gulp-inject
podczas mojej kompilacji gulp do wstrzyknięcia zawartości pliku SVG bezpośrednio do dokumentu HTML jako<svg>
elementu, który jest następnie bardzo łatwy w obsłudze za pomocą selektorów CSS iquerySelector
/getElementBy*
.źródło
img
tag jest przydatny przy ładowaniu dużych plików SVG ... Aby używać złożonego (i interaktywnego!) SVG, lepiej użyć D3js , czyli lite jQuery, specjalizującego się w manipulacji danymi SVG + DOM +.