Html 如何使用其父容器制作 svg 比例尺

要独立于图像的zoom 大小指定SVG图像中的坐标，请使用SVG元素上的viewBox属性定义图像的边框在图像坐标系中的位置，并使用width和height属性定义相对于包含页面的宽度或高度.

例如，如果您有以下情况:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

它将渲染为10px x 20px的三角形:

现在，如果只设置宽度和高度，将更改SVG元素的大小，但不会zoom 三角形:

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

如果设置视图框，则会导致它对图像进行变换，以使给定框(在图像的坐标系中)被放大以适应给定的宽度和高度(在页面的坐标系中).例如，要将三角形放大到100px x 50px，请执行以下操作:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

如果要将其放大到HTML视口的宽度，请执行以下操作:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

请注意，默认情况下，会保留纵横比.因此，如果您指定元素的宽度应为100%，但高度应为50px，则它实际上只会向上zoom 至50px的高度(除非您有一个非常窄的窗口):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

如果您实际上希望它水平拉伸，请禁用preserveAspectRatio=none的纵横比保留:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

(请注意，虽然在我的示例中，我使用了适用于HTML嵌入的语法，但为了将示例作为图像包含在StackOverflow中，我将其嵌入到另一个SVG中，因此我需要使用有效的XML语法)