extendViewBox()
属于 @remotion/paths
包。自 v3.2.25 版本起可用
通过一定的比例因子在所有方向上扩大 SVG 的 viewBox
。
note
这个函数可能是不必要的:如果您希望超出视图框的部分可见,您也可以在 SVG 容器上设置 style={{overflow: 'visible'}}
。
tsx
import {extendViewBox } from "@remotion/paths";constextended =extendViewBox ("0 0 1000 1000", 2);console .log (extended ); // "-500 -500 2000 2000"
tsx
import {extendViewBox } from "@remotion/paths";constextended =extendViewBox ("0 0 1000 1000", 2);console .log (extended ); // "-500 -500 2000 2000"
如果 viewBox 无效,该函数将抛出错误。
示例:显示超出边界的 SVG 路径
考虑以下 SVG:
该路径将在水平轴上从 0
到 1500
,但由于超出了视口区域,它将被截断。
tsx
constviewBox = "0 0 1000 1000";export constViewBoxExample :React .FC = () => {return (<svg viewBox ={viewBox }><path d ={"0 500 1500 500"}stroke ="black"strokeWidth ={4} /></svg >);};
tsx
constviewBox = "0 0 1000 1000";export constViewBoxExample :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";constviewBox = "0 0 1000 1000";export constViewBoxExample :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";constviewBox = "0 0 1000 1000";export constViewBoxExample :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 路径越超出容器,为了补偿,因子就需要越高。