SVGMarkerElement: preserveAspectRatio-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die schreibgeschützte Eigenschaft preserveAspectRatio des SVGMarkerElement-Interfaces gibt ein SVGAnimatedPreserveAspectRatio-Objekt zurück, das den Wert des preserveAspectRatio-Attributs des <marker> enthält.
Wert
Ein SVGAnimatedPreserveAspectRatio-Objekt. Die baseVal-Eigenschaft dieses Objekts gibt ein SVGPreserveAspectRatio-Objekt zurück, mit den folgenden Eigenschaften:
align-
Einer der folgenden numerischen Konstanten:
0-
SVG_PRESERVEASPECTRATIO_UNKNOWN 1-
SVG_PRESERVEASPECTRATIO_NONE 2-
SVG_PRESERVEASPECTRATIO_XMINYMIN 3-
SVG_PRESERVEASPECTRATIO_XMIDYMIN 4-
SVG_PRESERVEASPECTRATIO_XMAXYMIN 5-
SVG_PRESERVEASPECTRATIO_XMINYMID 6-
SVG_PRESERVEASPECTRATIO_XMIDYMID 7-
SVG_PRESERVEASPECTRATIO_XMAXYMID 8-
SVG_PRESERVEASPECTRATIO_XMINYMAX 9-
SVG_PRESERVEASPECTRATIO_XMIDYMAX 10-
SVG_PRESERVEASPECTRATIO_XMAXYMAX
meetOrSlice-
Einer der folgenden numerischen Konstanten:
Beispiele
Dieses Beispiel demonstriert, wie die numerischen Konstanten für align und meetOrSlice zurückgegeben werden, die sich auf die für das preserveAspectRatio-Attribut des <marker> gesetzten Werte beziehen.
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker
id="arrow"
viewBox="0 0 10 10"
refX="5"
refY="5"
preserveAspectRatio="xMidYMid meet"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
</svg>
let marker = document.getElementById("arrow");
console.log(marker.preserveAspectRatio.baseVal.align); // 6
console.log(marker.preserveAspectRatio.baseVal.meetOrSlice); // 1
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__preserveAspectRatio |
Browser-Kompatibilität
Loading…