如何将SVG样式转换为JSX

我想知道是否有任何内置函数或将SVG样式属性转换为JSX的反应。

我有这样的风格:

'opacity:0.647;fill:#cbcbcb;fill-opacity:1;stroke:#cbcbcb;stroke-width:0.26458335;stroke-opacity:1'

我想将其转换为:

{{"opacity":"0.647","fill":"#cbcbcb","fillOpacity":"1","stroke":"#cbcbcb","strokeWidth":"0.26458335","strokeOpacity":"1"}}

有什么简单的方法吗?

莫森·塔莱布(Mohsen Taleb)

没有内置功能。您可以使用简单的reducer函数将样式字符串转换为对象,然后将其作为prop传递。

const str =
  "opacity:0.647;fill:#cbcbcb;fill-opacity:1;stroke:#cbcbcb;stroke-width:0.26458335;stroke-opacity:1";

const styles = str.split(";");
const svgStyles = styles.reduce((obj, item, i) => {
  const [key, value] = item.split(":");
  const updatedkey = key.replace(/-([a-z])/ig, s => s.slice(-1).toUpperCase());
  obj[updatedkey] = value;
  return obj;
}, {});

console.log(svgStyles);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章