Latest web development tutorials

SVG Reference Manual

Element SVG

element wyjaśnienie nieruchomość
<a> Tworzenie łącza wokół elementu SVG xlink: pokaż
xlink: napęd
xlink: href
cel
<AltGlyph> Pozwala Celem tekstu kontroluje udzielenie specjalnych dane znakowe x
y
dx
dy
obracać
glyphRef
format
xlink: href
<AltGlyphDef> Jest ona zdefiniowana jako szereg symboli, aby zastąpić id
<AltGlyphItem> Wymień definicji szeregu symboli, takich jak kandydata id
<Animacja> Dynamicznie zmienić właściwości z upływem czasu attributeName = "name atrybut target"
z = "wartość początkowa"
to = "wartość End"
dur = "Czas"
"Nastąpi animacja czasu." RepeatCount =
<AnimateColor> W miarę upływu czasu, określenie to konwersja kolorów przez = "względna wartość offsetu"
z = "wartość początkowa"
to = "wartość End"
<AnimateMotion> Tak, że element przemieszcza się wzdłuż ścieżki ruchu = CalcMode "tryb interpolacji animacja może być" dyskretny "," liniowy "," tempo "," spline ""
path = "ścieżka ruchu"
keypoints = "wzdłuż drogi ruchu przedmiotów niniejszego czasie powinny być przenoszone daleko".
obrócić = "zastosować transformację rotacji".
xlink: href = "URI odwołuje się do <path> element, który określa ścieżkę ruchu."
<AnimateTransform> Animacja Element docelowy przekształcenia nieruchomości, dzięki czemu sterowanie pan animacja, zoom, obracanie lub pochylenia przez = "względna wartość offsetu"
z = "wartość początkowa"
to = "wartość End"
type = "typ przerobiona, którego wartość zmienia się w miarę upływu czasu może być" przetłumaczyć "," skala "," obracanie "," skewX ',' skewY ' "
<Okrąg> Definicja okręgu cx = "X-oś współrzędnych okręgu".
cy = "oś y współrzędna krąg."
r = "promień okręgu." Wymagany.

+ Pokaż atrybuty: kolor, FillStroke, grafiki
<ClipPath> Pozwala na ukrycie obiektów znajdujących się poza częścią ścieżki obcinania. Rysowanie, a co nie definiuje, co nazywamy ścieżką obcinania die rysunek Clip-path = "referencje i referencje wycinek ścieżka ścieżki wycinek krzyż".
clipPathUnits = "userSpaceOnUse" lub "objectBoundingBox". Potomstwo granicy druga wartość obiektu, wykorzystując niewielką część zespołu Maska (domyślnie: "userSpaceOnUse") "
<Color-profil> Opis określony profil kolorów (przy użyciu pliku stylu CSS) local = "color lokalnie przechowywane profil unikatowy identyfikator"
name = ""
rendering-intent = "auto | percepcyjne | względna kolorymetryczna | nasycenia | absolutny kolorymetryczna"
xlink: href = "profil ICC zasobem URI"
<Kursor> Definiowanie niestandardowego kursora niezależny od platformy x = "oś x lewy górny róg kursora (domyślnie 0)."
y = "Oś Y górnego lewego rogu kursorem (domyślnie 0)."
xlink: href = "Użyj obrazu kursora URI
<DEFS> Pojemnik elementem odniesienia
<Opis produktu> Czyste elementy SVG opisu tekstowego - nie jako część obrazka do wyświetlenia. Aplikacje klienckie mogą być wyświetlane jako podpowiedzi
<Elipsa> Definicja elipsy cx = "owalne osi x współrzędnych"
cy = "owalne osi y koordynować"
RT = "wzdłuż osi x promień elipsy". Wymagany.
Ry = "podłużny wzdłuż promienia osi Y". Wymagany.

+ Pokaż atrybuty: kolor, FillStroke, grafiki
<FeBlend> Za pomocą różnych sposobów mieszania, do syntezy ze sobą dwóch przedmiotów mode = "image tryby mieszania: normal | pomnożyć | Ekran | przyciemnić | rozjaśnić"
w = "zidentyfikowany jako wejście surowego danego filtra: SourceGraphic | SourceAlpha | BackgroundImage | backgroundAlpha | FillPaint | StrokePaint | <filter-prymitywne odniesienie>"
in2 = "Drugie wejście obrazu mieszania operacji."
feColorMatrix Filtr SVG. Nadaje transformacji macierzy
feComponentTransfer Filtr SVG. Komponent mądry Data realizacji odwzorowania
feComposite Filtry SVG
feConvolveMatrix Filtry SVG
feDiffuseLighting Filtry SVG
feDisplacementMap Filtry SVG
feDistantLight Filtr SVG. Określenie źródła światła
feFlood Filtry SVG
feFuncA Filtr SVG. feComponentTransfer elementy potomne
feFuncB Filtr SVG. feComponentTransfer elementy potomne
feFuncG Filtr SVG. feComponentTransfer elementy potomne
feFuncR Filtr SVG. feComponentTransfer elementy potomne
feGaussianBlur Filtr SVG. Wykonawczy rozmycie Gaussa obrazu
feImage Filtr SVG.
feMerge Filtr SVG. Zbudowany na górze każdej innej warstwy obrazu
feMergeNode Filtr SVG. feMerge elementy potomne
feMorphology Filtr SVG. Realizacja "tuczu" lub "rozrzedzenia" Grafiki źródłowych
feOffset Filtr SVG. W stosunku do aktualnej pozycji ruchomego obrazu
fePointLight Filtry SVG
feSpecularLighting Filtry SVG
feSpotLight Filtry SVG
feTile Filtry SVG
feTurbulence Filtry SVG
filtr Efekty filtrów Container
chrzcielnica Niestandardowe czcionki
font-face Opisać cechy czcionki
font-face-Format
font-face-name
font-face-src
font-face-uri
foreignObject
<G> Element pojemnika dla kombinacji elementów powiązanych id = "nazwa grupy".
wypełnić = "color grupy wypełnić."
Zadymienie = "Zadymienie grupa"

+ pokaż nieruchomości:
wszystko
glif Dla danego hieroglif niestandardowe grafiki
glyphRef Definicja piktogram mogą być stosowane
hkern
<Obraz> niestandardowy obraz x = "x-oś współrzędnych lewego górnego rogu obrazu."
y = "y osi współrzędnych lewego górnego rogu obrazu."
width = "szerokość obrazu." koniecznością.
height = "wysokość obrazu." koniecznością.
xlink :. href = "ścieżka obrazu" koniecznością.

+ pokaż nieruchomości:
Kolor, grafiki, obrazy, rzutnie
<Line> Wyznaczają linię X1 = "X-współrzędnych punktu startu linii prostej."
y1 = "y współrzędne punktu początkowego linii prostej."
x2 = "X-współrzędna punktu końcowego linii prostej."
y2 = "y współrzędna punktu końcowego linii prostej."

+ pokaż nieruchomości:
Kolor, FillStroke, Grafika, Markery
<Lineargradient> Określ gradient liniowy. Stosując liniowy gradient wypełnienia obiektów wektor i mogą być określone za pomocą poziomych, pionowych i kąta gradientu. id = "atrybut id może określić unikalną nazwę dla gradientu. referencje musi"
gradientUnits = "" userSpaceOnUse "lub" objectBoundingBox ". Za pomocą okna widoku lub obiektu w celu ustalenia względnego położenia punktu wektorowych. (domyślnie 'objectBoundingBox)"
gradientTransform = "odnosi się do zmiany gradientu"
x1 = "x wektora gradientu punkcie startowym (domyślnie 0%)"
y1 = "y punkt początkowy wektor gradientu (domyślnie 0%)"
x2 = "koniec gradientu wektora x. (domyślnie 100%)"
y2 = "koniec gradientu wektora y. (domyślnie 0%)"
spreadMethod = "" pad "lub" odzwierciedlać "lub" repeat ""
xlink: href = "odniesienia do innego gradientu, którego atrybutem wartości są używane jako domyślne i przystanki włączone rekurencyjnych."
<Znacznik> Znacznik może być umieszczony na wierzchołkowych linii, polilinii, wielokątów i ścieżkach. Elementy te mogą być wykorzystywane maeker właściwość "maeker-Start", "maeker-Mid" i "maeker-end", domyślnie dziedziczenia, albo mogą być ustawione na URI "none" lub zdefiniowanych tagów. Należy zdefiniować znacznik, zanim będzie mogła być uwzględniona przez URI. Wszelkiego rodzaju kształt, można umieścić znaczniki wewnątrz. Kiedy wyciągnąć elementy do przymocowania ich do góry markerUnits = "strokeWidth" lub "userSpaceOnUse". Jeśli strokeWidth ", a następnie korzystanie z urządzenia jest równa szerokości obrysu. W przeciwnym razie, nie należy używać tego samego zdania tag skalę jednostki jako element odniesienia (domyślnie 'strokeWidth')"
reFX = "Połączenia wierzchołków miejscem Marker (domyślnie 0)."
Refy = "Połączenia miejsce marker wierzchołków (domyślnie 0)."
orient = "" auto "Zawsze wyświetlaj znaku kąta." auto "zostanie obliczony pod kątem tak, że oś X stycznej wierzchołka (domyślnie 0)
markerWidth = "width zaznaczone (domyślnie 3)."
markerHeight = "height zaznaczone (domyślnie 3)."
viewBox = "punkty" widziana "obszar ten rysunek SVG. 4 Wartości oddzielone spacjami lub przecinkami. (min X, Min Y, szerokość, wysokość)"

+ Prezentacja atrybutów:
wszystko
<Maska> Ekranowanie jest połączeniem non-cięcia i wartości przezroczystości. Podobnie jak kadrowanie, można korzystać z niektórych elementów graficznych, tekstowych lub ścieżka zdefiniowana maska. Domyślnym stanem maski jest całkowicie przezroczysty, która jest przeciwieństwem płaszczyzny obcinania. W nieprzezroczystych części maskującego ustawienia maski maskUnits = "". userSpaceOnUse "lub" objectBoundingBox "określić, czy wycinek samolot jest stosunkowo nienaruszone okna lub obiektu (domyślnie: 'objectBoundingBox')"
maskContentUnits = "względnym położeniu obiektu druga maska ​​wzór procentowo 'userSpaceOnUse' lub 'objectBoundingBox' (domyślnie: 'userSpaceOnUse')"
x = "wycinek płaszczyzny maska ​​(domyślnie: -10%)."
y = "wycinek płaszczyzny maska ​​(domyślnie: -10%)."
width = "wycinek płaszczyzny maska ​​(domyślnie: 120%)."
height = "wycinek płaszczyzny maska ​​(domyślnie: 120%)."
metadanych Określone dane meta
brakujących glifów
mpath
<Ścieżka> Określ ścieżkę d = "Polecenie path-defined"
pathLength = "Jeśli nie ma, ścieżka zostanie przeskalowany w celu obliczenia wartości punktów równa długości tej drogi"
przekształcić = "Lista konwersji"

+ pokaż nieruchomości:
Kolor, FillStroke, Grafika, Markery
<Wzorzec> DET, rozmiar chcesz zobaczyć wyświetlacze i poglądy. Następnie dodać do swojego kształtu trybu. Ten wzór powtarza się trafić na krawędzi pola widzenia (widoczny zakres) id = "unikatowy identyfikator wykorzystywany do odniesienia tego wzorca." wymagane.
patternUnits = "userSpaceOnUse" lub "objectBoundingBox". Druga wartość X, Y, szerokość, wysokość ramy za pomocą trybu niewielką część obiektu, urządzenie (%). "
patternContentUnits = "" userSpaceOnUse "lub" objectBoundingBox ' "
patterntransform = "Pozwala to całe wyrażenie do konwersji"
x = "Tryb offset, od lewego górnego rogu (domyślnie 0)."
y = "tryb offset, od lewego górnego rogu (domyślnie 0)."
width = "width wzór płytki (domyślnie jest to 100%)."
height = "height wzór płytki (domyślnie jest to 100%)."
viewBox = "punkty" widziana "obszar ten rysunek SVG. 4 Wartości oddzielone spacjami lub przecinkami. (min X, Min Y, szerokość, wysokość)"
xlink: href = "Inny model, wartość nieruchomości jest domyślnym i każda podklasa może dziedziczyć rekursji."
<Polygon> Definiuje rysunek zawiera co najmniej trzy boki Punkty = "punkt wielokąta. Łączna liczba punktów musi być parzysta." Wymagany.
wypełnić regułę = "Sekcja atrybutem prezentacji FillStroke"

+ pokaż nieruchomości:
Kolor, FillStroke, Grafika, Markery
<Łamana> Zdefiniuj dowolny kształt tylko linie proste punkty polilinii = "punkt". Wymagany.

+ pokaż nieruchomości:
Kolor, FillStroke, Grafika, Markery
<RadialGradient> Definicja radioaktywne stopniowe. Tworzenie gradientu radialnego krąg gradientUnits = "" userSpaceOnUse "lub" objectBoundingBox ". Za pomocą okna widoku lub obiektu w celu ustalenia względnego położenia punktów wektorowych. (Domyślnie jest to" objectBoundingBox) "
gradientTransform = "odnosi się do przekształcenia gradienty"
cx = "center punkt gradientu (numery lub% - 50% jest to ustawienie domyślne)."
cy = "center punkt gradientu. (domyślnie 50%)."
r = "stopniowe promienia. (domyślnie 50%)."
fx = "Centralnym punktem gradientu. (domyślnie 0%)"
fy = "Centralnym punktem gradientu. (domyślnie 0%)"
spreadMethod = "" pad "lub" odzwierciedlać "lub" repeat ""
xlink: href = "odniesienia do innego gradientu, którego wartość nieruchomości jako domyślny rekursji."
<Rect> Zdefiniuj prostokąt x = "oś x lewy górny róg prostokąta."
y "y osi górnego lewego narożnika prostokąta".
rx = "Promień (pierwiastek tura) Oś X".
Ry = "promień osi y (pierwiastek okrągły)"
width = "szerokość prostokąta." Wymagany.
height = "Wysokość prostokąta." Wymagany.

+ pokaż nieruchomości:
Kolor, FillStroke, karty graficzne
scenariusz Pojemnik Script. (Takich jak ECMAScript)
zestaw Ustalenie wartości nieruchomości przez określony czas
<Stop> Gradient przystanek offset = "Stop przesunięcie (0-1 / 0% do 100%)." Reference
stop-color = "color to stop"
stop-krycie = "Zatrzymaj krycie (0-1)."
styl Arkusze stylów mogą być osadzone bezpośrednio w treści SVG
<Svg> Załóż fragment dokumentu SVG x = "osadzony w lewym górnym rogu (domyślnie 0)."
y = "osadzony w lewym górnym rogu (domyślnie 0)."
width = "width SVG fragment (domyślnie jest to 100%)."
height = "height SVG fragment (domyślnie jest to 100%)."
viewBox = "punkty" widziany "w tej dziedzinie SVG rysunku. 4 Wartości oddzielone spacjami lub przecinkami. (min X, min Y, szerokość, wysokość)"
preserveaspectratio = "" żadna ", ani" xVALYVAL 'dziewięć kombinacji, VAL jest "min", "Mid" lub "max". (domyślnie brak) "
zoomAndPan = "" powiększ "lub" wariant disable'.Magnify pozwala na przesuwanie i powiększanie plików (domyślnie powiększyć) "
xml = "zewnętrzna <svg> i jego potrzeby instalowania nazw SVG: xmlns =" ​​http://www.w3.org/2000/svg~~HEAD=dobj~~number=plural "xmlns: xlink =" http: //www.w3. org / 1999 / xlink "xml: space =" zachowanie ""

+ pokaż nieruchomości:
wszystko
wyłącznik
symbol
<Tekst> Zdefiniuj tekst x = "lista X - .. Położenie wału w tekście na stanowisku pierwszych n znaków n-tej osi x, jeśli istnieją dodatkowe znaki za wyczerpany po ostatniej pozycji znaku one umieszczone 0 jest domyślnym".
y = "position oś Y listy. (patrz X) 0 jest domyślnym".
dx = "przemieszczać się względem wyciągnąć ostatni glif w długości listy znaków w pozycji bezwzględnej (patrz X)"
dy = "przemieszczać się względem wyciągnąć ostatni glif w długości listy znaków w pozycji bezwzględnej (patrz X)"
obrócić = "obracający listę obrotów n-ty z pierwszych n znaków. dodatkowe znaki nie daje końcową wartość wirowania"
textLength = "SVG Viewer będzie próbował pokazać odstępy między tekstem / font lub wyregulować długość tekstu docelowego (domyślnie: normalna długość tekstu)."
lengthAdjust = "opowiada widzowi, jeśli starają się określić długość dostosowaną do renderowania tekstu. Te dwie wartości są" odstęp "i" spacingAndGlyphs ' "

+ pokaż nieruchomości:
Kolor, FillStroke, Grafika, FontSpecification, TextContentElements
textPath
tytuł Czyste elementy SVG opisu tekstowego - nie jako część obrazka do wyświetlenia. Aplikacje klienckie mogą być wyświetlane jako podpowiedzi
<Tref> Odnosi się do dowolnego dokumentu SVG <tekst> elementu i ponownego Tak samo <TEKST> Element
<Tspan> Element równoważny <text>, ale może być zagnieżdżona wewnątrz samego tekstu i znaku wewnętrznego Identyczny z elementem <tekst>
+ Dodatkowo:
xlink: href = "odniesienie do elementu <tekst>"
<Użyj> odniesienia URI za pomocą <G>, <svg> lub innej własności ma unikatowy identyfikator i powtarzające się elementy graficzne. Kopiowanie oryginalnego elementu, więc obecność oryginalnego pliku jest tylko punktem odniesienia. Oryginalny wpływu na zmianę we wszystkich kopiach. x = "lewy górny element klonu osi x"
y = "top lewa oś y elementem klon"
width = "klonowanie szerokość elementu"
height = "height klonowania elementu"
xlink: href = "odniesienia URI klonowania elementu"

+ pokaż nieruchomości:
wszystko
widok
vkern