React-SVG 내부의 HTML 태그

debugcn 에 게시 Dev

Lukáš Unzeitig

원 메뉴를 만들고 있으므로 SVG를 사용하여 원을 만들고 이제 원의 일부 내부에 이미지가있는 링크를 표시하고 싶습니다. 어떻게 할 수 있습니까? 내 코드-

render(){
    return(
       <svg id={"menuLevel" + index} width={200} height={200}>
          <path fill="white" stroke="rgba(0,0,0,0.2)" strokeWidth="2" d={"M"+width+","+width+" L"+previousX+", "+previousY+" A"+width+","+width+" 0 0,0 "+x+", "+y+" z"}></path>
      </svg>
    )
}

나는 이와 같은 것을 시도했다-

<path fill="white" stroke="rgba(0,0,0,0.2)" strokeWidth="2" d={"M"+width+","+width+" L"+previousX+", "+previousY+" A"+width+","+width+" 0 0,0 "+x+", "+y+" z"}>
     <foreignobject x="120" y="120" width="180" height="180">
         <Link ...><Image .../></Link>
     </foreignobject>
</path>

하지만 작동하지 않습니다.이 이물질은 여전히 너비가 0이고 높이가 0이며 내용이 표시되지 않습니다.

최신 정보

모든 경로 개체에 링크 구성 요소를 할당해야합니다.

<svg id={"menuLevel" + index} width={width*2+2} height={width*2+2}>
                    {arr.map(function(item){
                        let angleInRadians = -item * Math.PI / 180.0;
                        let previousX =  x;
                        let previousY = y;
                        x = width + width * Math.cos(angleInRadians);
                        y = width + width * Math.sin(angleInRadians);
                        return(
                                <path fill="white" stroke="rgba(0,0,0,0.2)" strokeWidth="2" d={"M"+width+","+width+" L"+previousX+", "+previousY+" A"+width+","+width+" 0 0,0 "+x+", "+y+" z"}>
                                </path>
                        )
                    })}
                </svg>

즐거움

여기 JSFiddle을 확인하십시오 . image요소를 사용 하여 SVG에 이미지 추가 : https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag

<svg width="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
     <circle x="0" y="0" r="200"></circle>
    <image xlink:href="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="200px" width="200px"/>
</svg>

참고 :

x 또는 y 속성을 설정하지 않으면 0으로 설정됩니다.

높이 또는 너비 속성을 설정하지 않으면 0으로 설정됩니다.

높이 또는 너비 속성이 0이면 이미지 렌더링이 비활성화됩니다.

업데이트 1

다음은 이미지와 함께 React 컴포넌트를 추가하는 작업 예제입니다 : JSFiddle . 그러나 Link구성 요소를 SVG의 형제로 만든 다음을 사용 absolute하여 배치합니다. 완벽한 솔루션이 아닙니다.

업데이트 2

경로를 클릭 가능하게 만들려면 : JSFiddle .

업데이트 3

이것은 ReactJS : JSFiddle 과 통합 된 클릭 가능한 경로가있는 이미지입니다 .

var Link = React.createClass({
  render: function() {
    return <a className="link" href={this.props.href} target="_blank">{this.props.children}</a>
  }
});

var Hello = React.createClass({ 
  render: function() {
    return <div id="container"><svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px">
     <Link href="http://www.google.com">
      <g transform="translate(100, 100)"><image href="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="200px" width="200px"/></g>
     </Link>
     <Link href="http://www.facebook.com">
     <g><image href="https://www.facebook.com/images/fb_icon_325x325.png" x="0" y="0" height="100px" width="100px"/></g>
     </Link>
</svg></div>
  }
});

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-13

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사