preserveAspectRatio

此页面上有脚本错误。虽然它是写给网站编辑,您可以在下面查看部分内容。

这篇翻译不完整。请帮忙从英语翻译这篇文章

« SVG Attribute reference home

有时候, 通常我们使用 {{ SVGAttr("viewBox") }} 属性时, 图形拉伸以不一致的方式占用整个viewport,所以是可取的. 在其他情况下,为了保持图形的纵横比,必须使用统一的缩放比例.

属性 preserveAspectRatio表示是否强制进行统一缩放.

对于支持该属性的所有元素(如上所示),除了{{SVGElement(“image”}} 元素)之外,preserveAspectRatio只适用于在同一元素上为{{SVGAttr(" viewBox ")}提供的值。对于这些元素,如果没有提供属性{{SVGAttr(“viewBox”)},则忽略了preserveAspectRatio。

对于 {{ SVGElement("image") }} 元素, preserveAspectRatio 指示引用的图像应该如何与参考矩形进行匹配,以及在当前的用户坐标系统中是否应该保留被引用图像的宽比.

Usage context

Categories None
Value <align> [<meetOrSlice>]
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
<align>
The <align> parameter indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the {{ SVGAttr("viewBox") }} doesn't match the aspect ratio of the viewport. The <align> parameter must be one of the following strings:
  • none
    Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.
    (Note: if <align> is none, then the optional <meetOrSlice> value is ignored.)
  • xMinYMin - Force uniform scaling.
    Align the <min-x> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.
    Align the <min-y> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.
  • xMidYMin - Force uniform scaling.
    Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.
    Align the <min-y> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.
  • xMaxYMin - Force uniform scaling.
    Align the <min-x>+<width> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.
    Align the <min-y> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.
  • xMinYMid - Force uniform scaling.
    Align the <min-x> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.
    Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.
  • xMidYMid (the default) - Force uniform scaling.
    Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.
    Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.
  • xMaxYMid - Force uniform scaling.
    Align the <min-x>+<width> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.
    Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.
  • xMinYMax - Force uniform scaling.
    Align the <min-x> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.
    Align the <min-y>+<height> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.
  • xMidYMax - Force uniform scaling.
    Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.
    Align the <min-y>+<height> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.
  • xMaxYMax - Force uniform scaling.
    Align the <min-x>+<width> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.
    Align the <min-y>+<height> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.
<meetOrSlice>
The <meetOrSlice> parameter is optional and, if provided, is separated from the <align> value by one or more spaces and then must be one of the following strings:
  • meet (the default) - Scale the graphic such that:
    • aspect ratio is preserved
    • the entire {{ SVGAttr("viewBox") }} is visible within the viewport
    • the {{ SVGAttr("viewBox") }} is scaled up as much as possible, while still meeting the other criteria
    In this case, if the aspect ratio of the graphic does not match the viewport, some of the viewport will extend beyond the bounds of the {{ SVGAttr("viewBox") }} (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw will be smaller than the viewport).
  • slice - Scale the graphic such that:
    • aspect ratio is preserved
    • the entire viewport is covered by the {{ SVGAttr("viewBox") }}
    • the {{ SVGAttr("viewBox") }} is scaled down as much as possible, while still meeting the other criteria
    In this case, if the aspect ratio of the {{ SVGAttr("viewBox") }} does not match the viewport, some of the {{ SVGAttr("viewBox") }} will extend beyond the bounds of the viewport (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw is larger than the viewport).

Example

Elements

The following elements can use the preserveAspectRatio attribute

  • {{ SVGElement("svg") }}
  • {{ SVGElement("symbol") }}
  • {{ SVGElement("image") }}
  • {{ SVGElement("feImage") }}
  • {{ SVGElement("marker") }}
  • {{ SVGElement("pattern") }}
  • {{ SVGElement("view") }}

文档标签和贡献者

 此页面的贡献者: webtuotuo2017
 最后编辑者: webtuotuo2017,