Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
y
Dasy Attribut definiert eine y-Achsenkoordinate im Benutzerkoordinatensystem.
In diesem Artikel
Elemente
Sie können dieses Attribut mit den unten beschriebenen SVG-Elementen verwenden.
<feBlend>
Für<feBlend> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feColorMatrix>
Für<feColorMatrix> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feComponentTransfer>
Für<feComponentTransfer> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feComposite>
Für<feComposite> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feConvolveMatrix>
Für<feConvolveMatrix> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feDiffuseLighting>
Für<feDiffuseLighting> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feDisplacementMap>
Für<feDisplacementMap> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feDropShadow>
Für<feDropShadow> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feFlood>
Für<feFlood> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feFuncA>
Für<feFuncA> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feFuncB>
Für<feFuncB> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feFuncG>
Für<feFuncG> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feFuncR>
Für<feFuncR> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feGaussianBlur>
Für<feGaussianBlur> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feImage>
Für<feImage> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feMerge>
Für<feMerge> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feMergeNode>
Für<feMergeNode> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feMorphology>
Für<feMorphology> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feOffset>
Für<feOffset> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<fePointLight>
Für<fePointLight> definierty die y-Position der Lichtquelle im Koordinatensystem, das durch dasprimitiveUnits Attribut auf dem<filter> Element definiert wird.
| Wert | <number> |
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
<feSpecularLighting>
Für<feSpecularLighting> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feSpotLight>
Für<feSpotLight> definierty die y-Position der Lichtquelle im Koordinatensystem, das durch dasprimitiveUnits Attribut auf dem<filter> Element definiert wird.
| Wert | <number> |
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
<feTile>
Für<feTile> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<feTurbulence>
Für<feTurbulence> definierty die minimale y-Koordinate für den Darstellungsbereich des Primitivs.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0% |
| Animierbar | Ja |
<filter>
Für<filter> definierty die y-Koordinate der oberen linken Ecke für den Darstellungsbereich des Filters.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | -10% |
| Animierbar | Ja |
<foreignObject>
Für<foreignObject> definierty die y-Koordinate der oberen linken Ecke seines Ansichtsfensters.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
Hinweis:Die y-Achsenkoordinate des<foreignObject> kann auch mit deryGeometrie-Eigenschaft definiert werden. Wenn im CSS festgelegt, überschreibt der Wert dery-Eigenschaft den desy-Attributs.
<image>
Für<image> definierty die y-Koordinate der oberen linken Ecke des Bildes.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
Hinweis:Die y-Achsenkoordinate des<image> kann auch mit deryGeometrie-Eigenschaft definiert werden. Wenn im CSS festgelegt, überschreibt der Wert dery-Eigenschaft den desy-Attributs.
<mask>
Für<mask> definierty die y-Koordinate der oberen linken Ecke seines Wirkungsbereichs. Der genaue Effekt dieses Attributs wird durch dasmaskUnits Attribut beeinflusst.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | -10% |
| Animierbar | Ja |
<pattern>
Für<pattern> definierty die y-Koordinate der oberen linken Ecke des Kachelmusters. Der genaue Effekt dieses Attributs wird durch die AttributepatternUnits undpatternTransform beeinflusst.
| Wert | <length> |
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
<rect>
Für<rect> definierty die y-Koordinate der oberen linken Ecke der Form.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
Hinweis:Die y-Achsenkoordinate des<rect> kann auch mit deryGeometrie-Eigenschaft definiert werden. Wenn im CSS festgelegt, überschreibt der Wert dery-Eigenschaft den desy-Attributs.
<svg>
Für<svg> definierty die y-Koordinate der oberen linken Ecke seines Ansichtsfensters.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
Hinweis:Die y-Achsenkoordinate des<svg> kann auch mit deryGeometrie-Eigenschaft definiert werden. Wenn im CSS festgelegt, überschreibt der Wert dery-Eigenschaft den desy-Attributs.
<text>
Für<text>, wenn es einen einzelnen Wert enthält, definierty die y-Koordinate, an der dieInhaltstextposition platziert werden muss. DieInhaltstextposition ist normalerweise ein Punkt auf der Basislinie der ersten Textzeile. Die genaueInhaltstextposition wird von anderen Eigenschaften beeinflusst, wie z. B.text-anchor oderdirection.
Wenn es mehrere Werte enthält, definierty die y-Koordinate jedes einzelnen Glyphen des Textes. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in einer Linie mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen Werte ignoriert.
| Wert | Liste von (<length> |<percentage>) |
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
html,body,svg { height: 100%;}<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <!-- y with a single value --> <text y="40%" x="5%">SVG</text> <!-- y with multiple values --> <text y="40%,60%,80%" x="55%">SVG</text></svg>text { font: 40px sans-serif;}line { fill: none; stroke: red; stroke-width: 0.5px; stroke-dasharray: 2px;}<tspan>
Für<tspan>, wenn es einen einzelnen Wert enthält, definierty die y-Koordinate, an der dieInhaltstextposition platziert werden muss. DieInhaltstextposition ist normalerweise ein Punkt auf der Basislinie der ersten Textzeile. Die genaueInhaltstextposition wird von anderen Eigenschaften beeinflusst, wie z. B.text-anchor oderdirection.
Wenn es mehrere Werte enthält, definierty die y-Koordinate jedes einzelnen Glyphen des Textes. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in einer Linie mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen Werte ignoriert.
| Wert | Liste von (<length> |<percentage>) |
|---|---|
| Standardwert | keiner |
| Animierbar | Ja |
html,body,svg { height: 100%;}<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <text> <!-- y with a single value --> <tspan y="40%" x="5%">SVG</tspan> <!-- y with multiple values --> <tspan y="40%,60%,80%" x="55%">SVG</tspan> </text></svg>text { font: 40px sans-serif;}line { fill: none; stroke: red; stroke-width: 0.5px; stroke-dasharray: 2px;}<use>
Für<use> definierty die y-Koordinate der oberen linken Ecke des referenzierten Elements.
| Wert | <length> |<percentage> |
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
Hinweis:Das Deklarieren eines<length> oder<percentage> Werts in CSS mit deryGeometrie-Eigenschaft überschreibt in einigen Browsern die y-Achsenkoordinate des<use>, die durch dasy Attribut festgelegt wurde. Dieses Verhalten ist unsicher.
Beispiele
Dieses Beispiel enthält drei<rect> Elemente, von denen jedes einen kleinereny-Wert als das vorherige Element hat.
html,body,svg { height: 100%;}<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="220" x="20" width="60" height="60" fill="red" /> <rect y="120" x="20" width="60" height="60" fill="yellow" /> <rect y="20" x="20" width="60" height="60" fill="purple" /></svg>Spezifikationen
Siehe auch
- CSS
yEigenschaft