extendViewBox()

属于 @remotion/paths 包。从 v3.2.25 版本起可用

🌐 Part of the @remotion/paths package. Available since v3.2.25

将 SVG viewBox 在所有方向上按一定的比例因子放大。

🌐 Widens an SVG viewBox in all directions by a certain scale factor.

note

此功能可能不必要：如果你希望超出视口的部分可见，你也可以在 SVG 容器上设置 style={{overflow: 'visible'}}。

import { extendViewBox } from "@remotion/paths";

const extended = extendViewBox("0 0 1000 1000", 2);
console.log(extended); // "-500 -500 2000 2000"

如果 viewBox 无效，该函数将抛出异常。

🌐 The function will throw if the viewBox is invalid.

示例：显示超出边界的 SVG 路径

🌐 Example: Displaying an SVG path that goes out of bounds

考虑以下 SVG：

🌐 Consider the following SVG:

路径将在水平轴上从 0 到 1500，但它会被截断，因为它超出了视口区域。

🌐 The path will go from 0 to 1500 on the horizontal axis, but it will be cut off because it goes beyond the viewport area.

const viewBox = "0 0 1000 1000";

export const ViewBoxExample: React.FC = () => {
  return (
    <svg viewBox={viewBox}>
      <path d={"0 500 1500 500"} stroke="black" strokeWidth={4} />
    </svg>
  );
};

我们可以通过做两件事来修复截止点：

🌐 We can fix the cutoff by doing two things:

将 viewBox 按 2 的比例缩放
对 SVG 应用 2 倍缩放变换。

import { extendViewBox } from "@remotion/paths";

const viewBox = "0 0 1000 1000";

export const ViewBoxExample: React.FC = () => {
  return (
    <svg style={{ scale: "2" }} viewBox={extendViewBox(viewBox, 2)}>
      <path d={"0 500 1500 500"} stroke="black" strokeWidth={4} />
    </svg>
  );
};

通过这样做，viewBox 的每个尺寸都会加倍，这将导致图片被缩小。通过应用缩放变换，可以纠正这一点。

🌐 By doing that, the each dimensions of the viewBox will be doubled, which will result in the picture being scaled down. By applying a scale transform, this can be corrected.

在这个例子中，选择了一个 2 因素，因为它足以解决裁剪问题。SVG 路径越超出容器，所需的因素就越高以进行补偿。

🌐 In this example, a factor of 2 was chosen because it is enough to fix the cutoff problem. The more the SVG path goes outside the container, the higher the factor needs to be to compensate.

另请参阅

🌐 See also

示例：显示超出边界的 SVG 路径​

另请参阅​

示例：显示超出边界的 SVG 路径

另请参阅