1

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

我正在使用 React 并使用用户定义的输入生成 SVG。我试图将用户单位定义为 mm 而不是默认的 px，但我似乎找不到正确的语法来使用 props 作为高度/宽度值并同时设置单位。我目前有由道具设置的宽度/高度值，如果我给出一个固定值（例如 15 毫米），我可以成功定义单位，但我不能同时做这两个。

// 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>
4

1 回答 1

1

正如我所怀疑的，我最初的问题只是缺乏语法经验。通过使用模板文字连接变量和单位指示符，我能够将单位与道具一起定义为值。

// 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>

谢谢你的帮助，约翰。

于 2019-05-31T21:13:58.767 回答