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:

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

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 路径越超出容器,为了补偿,因子就需要越高。

参见