javascript - 如何在功能组件中将高度属性作为参考传递

Question

我试图让 SVG 根据容器高度改变高度。我得到了一个高度，但它不是容器 div 的确切高度。

这是我的功能组件

const getHeight = (heightRef) => {
    return heightRef.current !== null ? heightRef.current.clientHeight: '200';
};

const getWidth = (heightRef) => {
    return heightRef.current !== null ? heightRef.current.clientWidth: '200';
};

const Services = ({ classes }) => {
    const heightRef = useRef(null);
    const [BGHeight, setBGHeight] = useState("500");
    const [BGWidth, setBGWidth] = useState("500");
    useEffect(()=>{
        setBGHeight(getHeight(heightRef));
        setBGWidth(getWidth(heightRef));
    },[])
    return (
        <div className={classes.Container} ref={heightRef}>
            <div className={classes.BGContainer} style={{maxHeight: BGHeight}}>
                <BGSVG width={BGWidth} height={BGHeight} color={'BGOpacity'} />
            </div>
        </div>
    );
};

这是我的 SVG

const test2 = ({width, height, color}) => {
    return (
        <svg viewBox={`0 0 210 297`} width={`${width}px`} height={`${height}px`}>
            <defs>
                <linearGradient id="myGradient" gradientTransform="rotate(90)">
                    <stop offset="5%"  stop-color="#F8E097" />
                    <stop offset="95%" stop-color="#F2CD5C" />
                </linearGradient>
            </defs>
            <path class={color} d={`m 0.22287672,94.082764 c 0,0 17.63282128,-34.831303 110.42670328,-36.348656 63.66595,-1.041057 101.55017,-59.333835 101.55017,-59.333835 L 211.66521,${height} H 0.75741577 Z`} fill="url('#myGradient')"/>
            <path class={color} d={`m 0.22287672,94.082764 c 0,0 37.63282128,-34.831303 120.42670328,-36.348656 63.66595,-1.041057 101.55017,-59.333835 101.55017,-59.333835 L 211.66521, ${height} H 0.75741577 Z`} fill="url('#myGradient')"/>
        </svg>
    );
};

正在发生的事情的一个例子是我的容器 div 在我的 chrome 开发工具中显示高度为“2836.59px”，但传递给 SVG 的高度是“2569”。

我尝试过一种解决方法，我只是使 SVG 更大并隐藏上述溢出，但我更愿意让它按我的意图工作。任何帮助，将不胜感激。

编辑以修复 Mike 提到的问题

标签： javascriptreactjssvg

Answer 1

除了属性之外，您还缺少一个width="..."and属性。没有它们，您实际上并没有告诉任何渲染这个 SVG 文档的内容应该有多大：height="..."viewBox

• 用于指示如何“viewBox裁剪”文档：文档中定义但在视图框之外的任何内容都不会被渲染（除非物理尺寸的纵横比与视图框不一致）。请注意，这些值没有附加任何单位，因为 SVG 坐标是无单位的
• /属性用于指示以什么“物理”大小呈现“裁剪”文档width。这些值确实有一个单位，因为它们告诉渲染 SVG 的任何东西它应该在其文档中占用多少空间。heightviewBox

因此<svg width="100px" height="100px" viewBox="0 0 10 20">，例如，将渲染 SVG 文档中位于裁剪矩形 (0,0)/(10,20) 内的所有内容，并针对纵横比进行校正（因此它实际上会在左侧填充 viewBox右），缩放到 100 像素 x 100 像素的文档大小：

svg { background: white; border:1px solid black; }

<svg viewBox="0 0 10 20" width="100px" height="100px">
  <rect fill="red" x="0" y="0" width="10" height="10"/>
  <rect fill="green" x="-10" y="5" width="10" height="10"/>
  <rect fill="blue" x="10" y="5" width="10" height="10"/>
</svg>

这里 SVG 文档本身以 100px x 100px 渲染，内容被裁剪为 (0,0)/(10,20)，这应该只是红色矩形，但物理纵横比与 viewbox 不匹配，所以viewBox 周围的内容被渲染以填补空白。

匹配 viewBox 和物理方面给出了预期的结果：

svg { background: white; border:1px solid black; }

<svg viewBox="0 0 10 10" width="100px" height="100px">
  <rect fill="red" x="0" y="0" width="10" height="10"/>
  <rect fill="green" x="-10" y="5" width="10" height="10"/>
  <rect fill="blue" x="10" y="5" width="10" height="10"/>
</svg>