Skip to main content

extendViewBox()

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

通过一定的比例因子在所有方向上扩大 SVG 的 viewBox。

note

这个函数可能是不必要的：如果您希望超出视图框的部分可见，您也可以在 SVG 容器上设置 style={{overflow: 'visible'}}。

tsx
import { extendViewBox } from "@remotion/paths";
 
const extended = extendViewBox("0 0 1000 1000", 2);
console.log(extended); // "-500 -500 2000 2000"
tsx
import { extendViewBox } from "@remotion/paths";
 
const extended = extendViewBox("0 0 1000 1000", 2);
console.log(extended); // "-500 -500 2000 2000"

如果 viewBox 无效，该函数将抛出错误。

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

考虑以下 SVG：

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

tsx
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>
  );
};
tsx
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>
  );
};

我们可以通过两种方式修复截断问题：

  • 将 viewBox 缩放 2 倍
  • 对 SVG 应用 2 倍的缩放变换。
tsx
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>
  );
};
tsx
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 的每个维度将加倍，这将导致图片被缩小。通过应用缩放变换，可以纠正这个问题。

在这个示例中，选择了因子 2，因为它足以解决截断问题。SVG 路径越超出容器，为了补偿，因子就需要越高。

参见​