使用React与工具创建的SVG

我知道我可以像使用HTML一样对SVG使用React。但是，复杂的SVG将在一个对React一无所知的外部工具（Inkscape，Illustrator等）中创建。现在，我曾经通过选择.querySelector的JQuery（可以给Inkscape中的节点ID选择它们，使它们很容易选择它们）并通过常规DOM操作应用转换/节点操作来操作SVG节点。使用React与工具创建的SVG

鉴于单向渲染和虚拟DOM的React方式，我不明白这是如何实现的。由于复杂的SVG往往会不断变化，因此复制SVG并在文本编辑器中操作SVG是不行的，因为设计人员希望在他最喜爱的SVG工具（肯定无法打开JSX）中重新打开它们。

有没有办法将Reacts单向渲染和手动选择和转换real DOM中的节点放在一起？

来源

2016-02-18 Dyna

需要SVG文件并将其加载到render方法中。通过ref =“svg”，您可以引用DOM节点并对其进行操作。如果你需要操作的页面加载该文件，你可以添加componentDidMount方法内部的逻辑，这将触发完成所有安装：

import React, {Component} from 'react'; 
 

 
export default class Test extends Component { 
 
    componentDidMount =() => { 
 
    const node = this.refs.svg; 
 
    // manipulate your node 
 
    } 
 

 
    render() { 
 
    const svg = require('crazy-big-file.svg'); 
 
    return (
 
     <div> 
 
     <svg ref="svg" dangerouslySetInnerHTML={{__html: svg}}/> 
 
     </div> 
 
    ); 
 
    } 
 
}

来源

2016-02-18 10:06:31 Spidi

那么，为什么你不只是需要你的超超级疯狂的大svg文件呢？ '''const的返回按钮=需要（ '疯狂-大file.svg'）;''' 并加载渲染方法内： '''''' – Spidi

与SVG解决这个工作流程的问题是我的主要动机创建https://www.npmjs.com/package/react-samy-svg。您可以使用单向声明式渲染而无需粘贴svg代码。所以svg文件可以和它的转换分开进化。希望能帮助到你。

Here's an example on Glitch

来源

2017-06-20 20:52:14

使用React与工具创建的SVG

回答

相关问题