将 SVG 缩放到没有遮罩/裁剪的容器 [英] Scale SVG to container without mask/crop

问题描述

我尝试了 svg 参数的许多变体，但在缩放这个特定的 SVG 时没有任何乐趣.

I have tried many variants of the svg parameters, but have had no joy in scaling this particular SVG.

我正在尝试将 此 SVG 包含到控制SVG 的大小.

I am trying to contain this SVG into a container element that controls the size of the SVG.

我的目标是 500x309 像素.

I'm aiming for 500x309px.

width、height、viewBox 和 preserveAspectRatio 的哪些组合可以帮助我在没有 SVG 的情况下实现这一目标蒙版还是裁剪?

What combination of width, height, viewBox and preserveAspectRatio can help me achieve this without having the SVG masked or cropped?

推荐答案

1. 您绝对必须有一个 viewBox SVG 元素上的属性，用于描述您希望始终可见的内容的边界框.(您链接到的文件没有；您需要添加一个.)

1. You absolutely must have a viewBox attribute on your SVG element that describes the bounding box of the contents you want to be always visible. (The file that you link to does not; you'll want to add one.)

要使您的 SVG 填充 HTML 元素，请将 CSS 属性 position:relative(或 position:absolute 或 position:fixed(如果适用)在您的包装器上，然后

To cause your SVG to fill an HTML element, put the CSS attribute position:relative (or position:absolute or position:fixed if appropriate) on your wrapper, and then

在 <svg> 元素上设置 CSS 属性 position:absolute 使其位于内部并填充您的 div.(如有必要，还应用 left:0; top:0; width:100%; height:100%.)

Set the CSS attribute position:absolute on your <svg> element to cause it to sit inside and fill your div. (If necessary, also apply left:0; top:0; width:100%; height:100%.)

一旦你有一个 viewBox 并且你的 SVG 大小正确，preserveAspectRatio 属性会做你想做的.特别是，xMidYMid meet 的默认值意味着:

Once you have a viewBox and your SVG sized correctly the default value of the preserveAspectRatio attribute will do what you want. In particular, the default of xMidYMid meet means that:

• 渲染时将保留 viewBox 描述的纵横比.
  相比之下，none 的值将允许非均匀缩放.
• viewBox 将始终相遇顶部/底部或左侧/右侧，信箱"将另一个维度保留在里面.
  相比之下，slice 的值可确保您的 viewBox 完全填充渲染，顶部/底部或左侧/右侧落在 SVG 之外.
• viewBox 将在 SVG 视口内保持垂直和水平居中.
  相比之下，xMinYMax 的值会将其保留在左下角，仅在右侧或顶部填充.

• The aspect ratio described by your viewBox will be preserved when rendering.
  By comparison, a value of none would allow non-uniform scaling.
• The viewBox will always meet either top/bottom or left/right, with 'letterboxing' keeping the other dimension inside.
  By comparison, a value of slice ensures that your viewBox fully fills the rendering, with either the top/bottom or left/right falling outside the SVG.
• The viewBox will be kept vertically and horizontally centered within the SVG viewport.
  By comparison, a value of xMinYMax would keep it in the bottom-left corner, with padding only to the right or top.

你可以在这里看到这个:http://jsfiddle.net/Jq3gy/2/

You can see this live here: http://jsfiddle.net/Jq3gy/2/

尝试为 <svg> 元素上的 preserveAspectRatio 指定显式值，然后按更新"查看它们如何影响渲染.

Try specifying explicit values for preserveAspectRatio on the <svg> element and press "Update" to see how they affect the rendering.

编辑:我创建了一个简化版的美国地图viewBox(几乎一半的字节)并在更新的演示中使用它以满足您的确切需求:http://jsfiddle.net/Jq3gy/5/

Edit: I've created a simplified version of the US Map with a viewBox (almost half the bytes) and used that in an updated demo to suit your exact needs: http://jsfiddle.net/Jq3gy/5/

这篇关于将 SVG 缩放到没有遮罩/裁剪的容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！