2017-01-26 7 views
0

に反応:が、私はそうのようなコンポーネントを反応させる内部のいくつかのSVG thsirtを表示しようとしていますインラインSVG

class TShirt extends React.Component { 
    showText() { 
     if(this.props.name != '') 
      { return 'show-text'; } 
    } 
    render() { 

     return (
      <div className="tshirt-wrapper"> 
       <div className="tshirt"> 
        <h1 className={this.showText()}>{this.props.name} 
         <span className="s">&rsquo;</span> 
         <span className={"inline " + (this.props.currentState.hideS ? 'hide': '')}>s</span> 
         <span className="block">about</span> 
        </h1> 
        <div> 

         <path className="st0" d="M764.9,559c0,0,28.2-35.6,40.2-68.3"/> 
         <g> 
          <path className="st1" d="M326.9,1216.5c-1.6,0-3,0-4.1-0.1c-2.9-0.3-5.5-0.3-7.9-0.4c-7.8-0.2-11.6-0.4-14-4.6c-0.6-1.1-1.3-2.2-2-3.3 
           c-3.7-6.1-6.9-11.3-5.1-19.4c2.2-10,6.4-34.8,9-58.6c0.8-7,1.8-15,2.8-23.4c2.3-18.5,4.9-39.5,5.7-55.4c0.4-8.1,1.1-18,1.8-27.5 
           c1.3-18.1,2.4-33.8,1.7-38c-0.9-5.8,0-15.8,1.2-22.5c0.5-2.7,1-7.5,1.6-13.6c1.1-9.8,2.5-23.2,4.7-36.9c4.1-26.5,11-73.4,10.4-90.3 
           c-0.6-16.8-6.3-80.6-9.7-117.1c-1.8-19.8-2.8-36.5-3.5-48.8c-0.4-7.1-0.8-12.7-1.1-16.9c-0.5-5.4-1.6-13.1-2.9-21.2 
           c-1.4-9.6-2.9-19.5-3.6-27.6c-1.8-20.8-5.6-24.9-8.7-26.1c-0.7-0.3-1.6-0.4-2.5-0.4c-2.8,0-6.3,1.4-10.7,4.4 
           c-0.2,0.1-0.6,0.3-0.9,0.4c-1.7,0.7-4.5,1.9-5.5,5.9c-0.9,3.8-1.2,11.3-1.2,11.6l0,0.6l0.1,0.3c0,0,0,0,0,0c0,0,0,0.1,0,0.1 
           c0,0.1-0.3,0.3-1,0.4l-0.3,0.1l-0.3,0.1c0,0-1.9,0.8-5.6,0.8c-2.8,0-5.9-0.5-9.1-1.4c-2.3-0.7-4.7-1.4-7.2-2.3 
           c-9-2.9-19.1-6.2-29.4-6.2c-0.4,0-0.8,0-1.2,0c-0.8,0-1.6,0-2.4,0c-10.2,0-19.9-1.7-33.3-4c-2.2-0.4-4.4-0.8-6.8-1.2 
           c-6-1-12.9-1.8-19.6-2.5c-8.6-0.9-21.4-2.3-24.1-4.1c1.1-4.2,2.2-6.9,4.1-11.4l0.9-2c1.6-3.7,2-6.8,2.5-9.6 
           c0.3-1.9,0.5-3.5,1.1-5.1l0.2-0.7c1.9-5.3,6.9-19.5,7.9-31.4c2-25.1,5.8-46.8,10.9-62.7c0.1-0.4,11-36,21.1-49.5 
           c10.9-14.6,28.1-34.7,41.7-46.9c14-12.5,20.7-17.7,30.4-22.4c4.2-2,9-3.8,13.7-5.5c6.3-2.3,12.8-4.7,18.3-7.8 
           c5.4-3,24.9-13.8,43.7-24.2c13.6-7.5,27-14.9,34.5-19.1c3.1-1.7,6-3.3,8.7-4.8c16.2-8.9,23.4-13,25.1-15.4c1-1.4,1.3-2.7,1.6-3.7 
           c0.3-1.3,0.4-1.6,1.2-2.1c0.8-0.5,1.7-0.8,2.7-1.1c1.9-0.6,4.3-1.3,6.7-3.8c2.2-2.2,6.8-6.8,10.6-7c0.1,0,0.3,0,0.4,0 
           c4.7,0,19.1,2.8,32.3,6.2c13.7,3.5,45.7,8.8,77.9,8.8c30.9,0,57.6-1.2,69.6-3c6.4-1,13.5-2.7,18.7-3.9c3.2-0.7,6.8-1.6,7.6-1.6 
           c1,0.2,4.4,3,5.8,4.2c0.8,0.6,1.4,1.2,1.9,1.6c1.4,1,3.2,1.4,5.3,1.9c2.1,0.4,4.4,0.9,6.8,2.1c2.1,1,5.5,3.9,8.8,6.6 
           c4.3,3.6,8.8,7.3,12.3,8.9c2.5,1.1,5.2,2.9,8,4.8c3.6,2.4,7.4,4.9,11.2,6.3c2.5,0.9,5.8,1.9,9.2,3c5.3,1.7,11.3,3.5,15.1,5.2 
           c2.7,1.2,11.5,6,20.8,11.2c12.1,6.7,25.9,14.4,31.2,16.6c3.6,1.5,9.7,3.7,16.1,6c8.4,3,19.8,7.2,21.3,8.2c0.9,0.7,0.9,0.9,1,1.2 
           c0.1,0.6,0.3,1.6,1.2,2.5c0.5,0.5,1.4,1.1,4.6,3c5.2,3.3,13.9,8.7,22.2,15.2c12.3,9.5,33.7,30.3,40.8,44.6l1.9,3.8 
           c6.8,13.8,14.6,29.5,17.9,45.6c2.8,13.4,5.4,37.6,7.4,55.2c0.6,5.8,1.2,10.8,1.6,14.3c1.8,14.5,8,40.2,10.8,49.4 
           c2,6.7,3.3,10.9,3.7,12.6c-1.1-0.5-2.4-0.9-3.6-1.1c-0.3,0-0.6,0-0.9,0c-1.6,0-4.3,0.3-7.7,0.7c-3.4,0.4-7.3,0.8-11,1.1 
           c-2,0.1-7.2,0.2-13.8,0.2c-19.9,0.2-53.3,0.5-66.1,3.3c-12.1,2.7-26.8,7.2-34.7,9.6c-2,0.6-3.9,1.2-4.7,1.4c0.3-3-0.7-6.1-2.8-9.2 
           c-0.1-0.2,0.1-0.9,0.2-1.3c0.3-1.4,1.1-4.7-2.6-6.5c-1.1-0.6-2-0.9-2.8-1.2c-0.4-0.1-0.9-0.3-1.2-0.5c0-0.1,0-0.2,0-0.3 
           c0.2-2.7-1.6-5.2-2.7-6.4c-0.7-0.7-3.1-3.2-5.5-3.2h-0.1l-0.2,0c-1.9,0.1-4.3,0.7-5.3,3.7c-0.7,2-4.2,11.1-6.3,13.7l-0.3,0.4 
           c-2.6,3.3-2.7,3.8-3.1,10c-0.1,1.5-0.2,5.5-0.3,11.6c-0.4,18.4-1.4,56.8-4,96.6c-3.4,51.7-7,88.1-8.5,100c-0.2,1.6-0.4,3-0.6,4.3 
           c-1.2,8.8-1.9,13.7-0.4,28.1c0,0,7.6,65.3,8.6,74c0.6,4.8,2.2,15.6,3.8,26c1.3,8.5,2.5,16.5,3.1,21c0.6,4.4,1.8,10.7,3.2,17.9 
           c1.9,9.7,4,20.6,5.3,30.4c1.6,12.7,2.7,39.6,3.4,57.4c0.2,6,0.4,11.2,0.6,14.4c0.4,7,3,21.5,5.8,36.9c2.3,12.6,4.6,25.6,5.7,34.6 
           c2.5,20,5.5,35.9,7,39.7c0.6,1.6,0.7,4,0.7,6.5c0,2.1,0.1,4.4,0.5,6.5c0.9,4.5,2.5,9,2.6,9.2l0.2,0.5l0.3,0.4 
           c0.1,0.1,0.4,0.6,0.1,1.1c-0.9,1.6-5.9,8.4-13.2,9.7c-3.7,0.7-15.5,1.4-31.1,1.4c-14.7,0-27.9-0.6-37.3-1.7 
           c-19.5-2.3-56.7-6.1-86.4-6.1c-6,0-11.5,0.2-16.4,0.5c-29.7,1.9-101.4,2.7-124.9,2.7c-2.3,0-4.2,0-5.8,0c-0.6,0-1.1,0-1.7,0 
           c-9.5,0-18.4,0.7-26.2,1.3c-5.9,0.5-11.1,0.9-15.3,0.9c-0.6,0-1.2,0-1.8,0c-2.7-0.1-6.1-0.4-10.1-0.7c-6.5-0.5-14.6-1.1-22.3-1.1 
           c-5.2,0-9.5,0.3-13.3,0.8C366.3,1213.2,340.2,1216.5,326.9,1216.5z"/> 
          <path d="M430.4,233.8c4.5,0,18.7,2.7,31.7,6.1c13.8,3.6,46.1,8.9,78.5,8.9c31.1,0,57.9-1.2,70-3.1c6.5-1,13.7-2.7,18.9-3.9 
           c2.5-0.6,5.3-1.2,6.6-1.5c1.2,0.7,3.6,2.6,4.6,3.5c0.8,0.6,1.4,1.2,2,1.6c1.8,1.4,4,1.8,6.3,2.3c1.9,0.4,4.1,0.9,6.2,1.9 
           c1.8,0.9,5.2,3.8,8.3,6.3c4.4,3.7,9,7.5,12.9,9.3c2.3,1.1,4.9,2.8,7.7,4.6c3.8,2.5,7.7,5.1,11.7,6.5c2.5,0.9,5.8,1.9,9.3,3 
           c5.2,1.6,11.2,3.5,14.9,5.1c2.6,1.1,11.7,6.2,20.6,11.1c12.8,7.1,26,14.5,31.5,16.7c3.7,1.5,9.8,3.7,16.2,6 
           c7.5,2.7,18.8,6.8,20.8,7.9c0,0,0,0,0,0c0.2,0.8,0.6,2.2,1.8,3.4c0.7,0.7,1.5,1.2,5,3.4c5.1,3.2,13.8,8.6,22,15 
           c12.6,9.8,33.5,30.4,40.1,43.8c0.6,1.2,1.2,2.5,1.9,3.8c6.8,13.7,14.4,29.2,17.7,45c2.8,13.3,5.4,37.4,7.3,55 
           c0.6,5.8,1.2,10.8,1.6,14.3c1.8,14.6,8.1,40.6,10.9,49.9c1,3.4,1.9,6.2,2.5,8.3c-0.3,0-0.6,0-0.9,0c-1.8,0-4.5,0.3-8,0.7 
           c-3.4,0.4-7.3,0.8-10.9,1.1c-1.9,0.1-7.1,0.2-13.7,0.2c-20,0.2-53.5,0.5-66.6,3.4c-12.2,2.7-27,7.2-34.9,9.7 
           c-0.6,0.2-1.1,0.3-1.6,0.5c-0.4-2.2-1.2-4.3-2.6-6.5c0,0,0-0.1,0-0.1c1-4.3-0.3-7.5-3.9-9.3c-1-0.5-1.9-0.9-2.6-1.2 
           c-0.3-3-2.2-5.4-3.4-6.7c-1.1-1.2-4-4-7.4-4c-0.1,0-0.3,0-0.4,0c-3.9,0.3-6.4,2.1-7.5,5.4c-0.8,2.4-4.2,10.8-5.9,12.9l-0.3,0.4 
           c-3.1,3.9-3.3,5.1-3.7,11.4c-0.1,1.6-0.2,5.6-0.3,11.7c-0.4,18.4-1.3,56.7-4,96.5c-3.4,51.6-6.9,88-8.5,99.9 
           c-0.2,1.5-0.4,3-0.6,4.3c-1.2,8.7-1.9,14-0.4,28.7l0,0l0,0c0.1,0.7,7.6,65.4,8.6,74c0.6,4.9,2.2,15.7,3.8,26.1 
           c1.3,8.5,2.5,16.5,3.1,21c0.6,4.5,1.8,10.8,3.2,18.1c1.9,9.6,4,20.6,5.2,30.2c1.6,12.6,2.6,39.4,3.4,57.2c0.2,6,0.4,11.3,0.6,14.5 
           c0.4,7.1,3,21.7,5.8,37.2c2.3,12.5,4.6,25.5,5.7,34.5c2.3,18.4,5.4,35.7,7.1,40.3c0.4,1.2,0.5,3.4,0.6,5.6c0.1,2.2,0.1,4.6,0.5,6.9 
           c0.9,4.7,2.6,9.4,2.7,9.6l0.2,0.8c-1.5,2.1-5.6,6.6-10.9,7.6c-3.6,0.7-15.2,1.3-30.6,1.3c-14.6,0-27.7-0.6-37-1.7 
           c-19.6-2.3-56.8-6.2-86.7-6.2c-6.1,0-11.6,0.2-16.5,0.5c-29.6,1.9-101.2,2.7-124.7,2.7c-2.3,0-4.2,0-5.8,0c-0.6,0-1.2,0-1.7,0 
           c-9.6,0-18.5,0.7-26.4,1.3c-5.9,0.5-11,0.9-15.1,0.9c-0.6,0-1.2,0-1.7,0c-2.6-0.1-6.1-0.4-10-0.7c-6.6-0.5-14.7-1.2-22.5-1.2 
           c-5.3,0-9.8,0.3-13.7,0.9c-13.3,2-39.2,5.3-52.3,5.3c-1.5,0-2.8,0-3.9-0.1c-2.9-0.3-5.7-0.3-8.1-0.4c-7.6-0.2-10.2-0.5-11.8-3.3 
           c-0.7-1.2-1.4-2.3-2-3.4c-3.5-5.8-6.3-10.5-4.8-17.6c2.2-10,6.5-34.9,9.1-58.9c0.8-7,1.8-14.9,2.8-23.4c2.3-18.6,4.9-39.6,5.7-55.6 
           c0.4-8.1,1.1-17.9,1.8-27.4c1.5-21.1,2.4-34.3,1.7-38.6c-0.9-5.5,0.1-15.1,1.2-21.7c0.5-2.8,1-7.6,1.7-13.7 
           c1.1-9.8,2.5-23.1,4.7-36.8c5.1-32.4,11-74.5,10.4-90.8c-0.6-16.9-6.3-80.7-9.7-117.3c-1.8-19.7-2.8-36.5-3.5-48.7 
           c-0.4-7.1-0.8-12.7-1.1-17c-0.5-5.5-1.6-13.2-2.9-21.4c-1.4-9.5-2.9-19.4-3.6-27.4c-1.5-17.7-4.5-25.9-10.3-28.2 
           c-1-0.4-2.2-0.6-3.4-0.6c-3.3,0-7.2,1.5-12,4.7c-0.1,0.1-0.4,0.2-0.6,0.3c-1.9,0.8-5.7,2.4-6.9,7.7c-0.8,3.5-1.2,9.6-1.3,11.5l0,0 
           c-0.3,0.1-1.9,0.6-4.5,0.6c-2.6,0-5.4-0.4-8.4-1.3c-2.3-0.7-4.6-1.4-7.1-2.2c-9.1-3-19.5-6.3-30.1-6.3c-0.4,0-0.8,0-1.3,0 
           c-0.8,0-1.6,0-2.3,0c-9.9,0-19.6-1.7-32.9-4c-2.2-0.4-4.4-0.8-6.8-1.2c-6.1-1-13-1.8-19.7-2.5c-7-0.7-17-1.8-21.3-3.1 
           c0.9-2.9,1.9-5.4,3.4-9c0.3-0.6,0.6-1.3,0.9-2.1c1.7-4,2.2-7.4,2.6-10.1c0.3-1.8,0.5-3.3,1-4.6l0.2-0.7c1.9-5.4,7-19.8,8-32.1 
           c2-24.9,5.8-46.4,10.8-62.1l0,0l0,0c0.1-0.4,10.9-35.5,20.7-48.7c10.9-14.5,27.9-34.5,41.3-46.5c13.8-12.3,20.4-17.5,29.8-22 
           c4.1-2,8.9-3.7,13.5-5.4c6.4-2.4,13-4.8,18.6-8c5.3-3,24.8-13.8,43.7-24.2c13.9-7.6,27-14.9,34.5-19.1c3.1-1.7,6-3.3,8.7-4.8 
           c17.7-9.8,23.9-13.3,26-16.2c1.2-1.8,1.7-3.4,2-4.5c0.1-0.2,0.1-0.5,0.2-0.6c0.5-0.3,1.2-0.5,2.1-0.8c2.1-0.6,4.9-1.5,7.8-4.4 
           c1.8-1.8,6.1-6.1,9-6.3C430.2,233.8,430.3,233.8,430.4,233.8 M430.4,228.8c-0.2,0-0.4,0-0.6,0c-4.5,0.2-9,4.5-12.2,7.8 
           s-6.2,2.8-9,4.5s-1.8,4-3.5,6.5s-15,9.5-33,19.5s-69,38-78.2,43.2s-21.8,8.5-31.8,13.2c-10,4.8-17,10.2-31,22.8s-31.5,33.2-42,47.2 
           s-21.5,50.2-21.5,50.2c-7.2,22.8-10,51-11,63.3s-6.5,27.2-8,31.5s-1,8.5-3.5,14.5s-3.9,9.1-5.2,14.4c-1.3,5.3,27.2,5.8,45.8,9 
           c17.5,3,28.5,5.2,40.5,5.2c0.8,0,1.6,0,2.5,0c0.4,0,0.8,0,1.1,0c12.6,0,25.3,5.3,35.9,8.3c4,1.2,7.3,1.5,9.8,1.5 
           c4.4,0,6.7-1.1,6.7-1.1c3.8-0.8,2.9-3.8,2.9-3.8s0.3-7.5,1.2-11.2c0.8-3.7,3.8-3.8,5.3-4.8c1.3-0.9,5.9-3.9,9.3-3.9 
           c0.6,0,1.1,0.1,1.5,0.3c3.3,1.3,5.8,8.7,7.2,24c1.3,15.3,5.5,37.3,6.5,48.8s1.8,34.7,4.7,65.7c2.8,31,9,99.5,9.7,117 
           c0.7,17.5-6.8,67.5-10.3,89.8c-3.5,22.3-5.2,43.5-6.3,50.5s-2.2,17.2-1.2,23.3c1,6.2-2.3,42.2-3.5,65c-1.2,22.8-6,55.8-8.5,78.7 
           s-6.7,47.7-9,58.3c-2.3,10.7,3.2,17.2,7.3,24.5c4.2,7.3,12.5,5.2,23.8,6.2c1.2,0.1,2.7,0.2,4.3,0.2c13.6,0,39.9-3.4,53-5.3 
           c4-0.6,8.4-0.8,13-0.8c12.1,0,25,1.6,32.4,1.8c0.6,0,1.2,0,1.9,0c9.9,0,24.7-2.2,41.5-2.2c0.6,0,1.1,0,1.7,0c1.5,0,3.5,0,5.8,0 
           c25.7,0,96.1-0.9,125-2.7c5-0.3,10.5-0.5,16.2-0.5c30,0,67.1,3.9,86.1,6.1c10.7,1.3,24.8,1.7,37.6,1.7c14.4,0,27.2-0.6,31.5-1.4 
           c8.2-1.5,13.8-8.8,15-11c1.2-2.2-0.5-4-0.5-4s-1.7-4.5-2.5-8.8c-0.8-4.3,0-9.8-1.3-13.3c-1.3-3.5-4.3-19.2-6.8-39.2 
           s-10.8-58.8-11.5-71.3c-0.7-12.5-1.8-54.8-4-72c-2.2-17.2-7.2-38.2-8.5-48.3c-1.3-10.2-5.8-38.3-6.8-47c-1-8.7-8.6-74-8.6-74 
           c-1.7-16.3-0.5-20.2,1-31.9c1.5-11.7,5-47.5,8.5-100.2c3.5-52.7,4-102.1,4.3-108.2c0.4-6.1,0.4-5.9,2.9-9c2.5-3.1,6.2-13,6.8-14.5 
           s1.4-1.9,3.1-2c0,0,0.1,0,0.1,0c1.8,0,6,3.9,5.8,6.9c-0.2,3,1.9,2.6,5.2,4.4c3.4,1.8-0.1,4.6,1.5,7c1.6,2.4,2.8,5.1,2.4,7.9 
           c-0.3,2.3,1.2,2.5,2.2,2.5c0.2,0,0.3,0,0.4,0c0.8,0,23-7.4,39.9-11.1c16.9-3.8,71.5-3,79.5-3.5c7.4-0.5,15.5-1.8,18.6-1.8 
           c0.3,0,0.5,0,0.7,0c2.1,0.2,4.9,2.1,6.2,2.1c0.1,0,0.3,0,0.4-0.1c1.1-0.5-0.1-3.2-0.1-3.2s-1.2-4.5-4-13.5s-9-34.8-10.8-49 
           s-5.2-51.8-9-69.8s-12.8-35.2-20-50s-29.2-36-41.5-45.5s-25.5-17-26.5-18s0.2-2-2.5-4s-28.8-10.8-38-14.5s-45.5-25-52-27.8 
           s-18.2-6-24.5-8.2s-13-8.2-19-11s-16-13-21-15.5s-9.8-2.2-11.8-3.8s-7-6.2-9.2-6.2s-15.5,3.8-26.8,5.5s-37.2,3-69.2,3 
           s-63.8-5.2-77.2-8.8C450.3,231.7,435.5,228.8,430.4,228.8L430.4,228.8z"/> 
         </g> 
         <path className="st2" d="M420.4,247c0,0,47,14,107.7,14s78.7-2,129.7-13"/> 
         <path className="st0" d="M157.3,546c0,0,115.3,23.3,131.3,24.3"/> 
         <path className="st0" d="M297.4,564.8c0,0-26.9-16.5-54.3-37"/> 
         <path className="st0" d="M298.4,564.9c0,0-18.5-11.4-38.6-48.7"/> 
         <path className="st3" d="M298.4,564.9c0,0-36.9-69.9-32.2-120.3c4.7-50.3,3.2-56.7-12.8-113.3"/> 
         <path className="st3" d="M813.3,328.8c-22.9,71.7-13.8,55.8-19.8,127.8S764.9,559,764.9,559"/> 
         <path className="st0" d="M770.4,562.5c0,0,21.8-22.3,43.6-47.5"/> 
         <path className="st0" d="M770.4,562.5c0,0,15.7-18.3,49.2-31"/> 
         <path className="st0" d="M908.1,551.3c0,0-76.8-0.2-129.2,20.2"/> 
         <path className="st3" d="M294.1,1180.3c0,0,3.3,12,24.3,12.7c21,0.7,69.7-8,93.3-8s71.3,5,136.3,4.7s84.3-6.7,122.7-5.3 
          c38.3,1.3,73.7,9.3,88.7,6.7c15-2.7,22.8-7.7,22.8-7.7"/> 
         <path className="st0" d="M763.8,559.2c-1-1.6,2.8-29.4-4.5-64"/> 
         <path className="st0" d="M301.6,565.3c0,0-5.8-11.3-0.2-29.3c2.4-7.5,5.6-17.1,8.5-25.8"/> 
         <path className="st2" d="M284.4,615.3"/> 


        </div> 
         { 
          this.props.iconsHolder ? 
          <IconsHolder 
           icons={this.props.icons} 
           slotA={this.props.slotA} 
           optionA={this.props.optionA} 
           slotB={this.props.slotB} 
           optionB={this.props.optionB} 
           slotC={this.props.slotC} 
           optionC={this.props.optionC} 
           setSlotA={this.props.setSlotA} 
           setSlotB={this.props.setSlotB} 
           setSlotC={this.props.setSlotC} /> 
           : 
           "" 
         } 
       </div> 
      </div> 
     ); 
    } 
} 

のWebPACKを実行しているとき、私はすべてのエラーを得ることはありませんし、どちらもコンソールで、しかし、IMGはないん私はマークアップのコードを見ることができますが表示されます。

答えて

3

SVG要素を使用する場合は、SVGドキュメント内で行う必要があります。

これを達成するために、SVG要素の周りに<svg></svg>を追加します。

関連する問題