当高度/宽度值为React props时,如何设置SVG用户单位?

时间:2019-05-31 18:14:23

标签: reactjs svg

这里是新手,这是我的第一个stackoverflow问题,如果这是一个格式不正确的问题,我们深表歉意。

我正在React中工作,并使用用户定义的输入生成SVG。我正在尝试将用户单位定义为mm而不是默认的px,但似乎找不到使用props作为高度/宽度值并同时设置单位的正确语法。我目前有一些由props设置的width / height值,如果我给出一个固定值(例如15mm),我可以成功定义单位,但是我不能同时做这两个事情。

// app.js

...

state = {
   svgWidth: 200,
   svgHeight: 200,
};

handleChange = (e) => {
   const name = e.target.id;
   const value = parseFloat(e.target.value
   this.setState({ [name]: value });
};

...

<Inputs
   {...this.state}
   handleChange={this.handleChange}
/>

<SVG
  {...this.state}
/>

//inputs.js

...

<TextField
   id="svgWidth"
   value={props.svgWidth}
   onChange={handleChange}
/>

<TextField
   id="svgHeight"
   value={props.svgHeight}
   onChange={handleChange}
/>


// svg.js

...

<svg width={props.svgWidth} height={props.svgHeight}>
   ...
</svg>

1 个答案:

答案 0 :(得分:1)

我怀疑,我最初的问题只是缺乏语法方面的经验。通过使用模板文字将变量和单位指示符连接起来,我能够将props旁边的单位定义为值。

// svg.js

...

<svg 
   width={`${props.svgWidth}mm`}
   height={`${props.svgHeight}mm`}
>
   ...
</svg>

但是,为了将svg用户单元链接到在顶级svg元素上定义的“现实世界”单元,我必须将svg viewBox定义为相同尺寸。

// svg.js

...

<svg
   width={`${props.svgWidth}mm`}
   height={`${props.svgHeight}mm`}
   viewBox={`0 0 ${props.svgWidth} ${props.svgHeight}`}
>
   ...
</svg>

谢谢你的帮助,约翰。