Najlepszy samouczek SVG Reference Manual W 2024 r. W tym samouczku możesz dowiedzieć się 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 - pl 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 |