React - svg 中的 html 标签

IT技术 html reactjs svg render
2021-05-14 18:25:03

我正在制作圆形菜单，所以我使用 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>
1个回答

请在此处查看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>
  }
});
其它你可能感兴趣的问题
上一篇如何配置 Office-js excel react 插件以使用 react-router-dom 或替代解决方案？ 下一篇我怎样才能阻止底层的耀斑？