React - svg 中的 html 标签

Posted 2023-03-05

【中文标题】React - svg 中的 html 标签

【英文标题】：React - html tags inside svg

【发布时间】：2017-01-10 02:45:17

【问题描述】：

我正在制作圆形菜单，所以我使用 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"  >
         <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   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"  />
</svg>

请注意：

如果不设置 x 或 y 属性，它们将被设置为 0。

如果不设置 height 或 width 属性，它们将被设置为 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"  >
     <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"  /></g>
     </Link>
     <Link href="http://www.facebook.com">
     <g><image href="https://www.facebook.com/images/fb_icon_325x325.png" x="0" y="0"  /></g>
     </Link>
</svg></div>
  
);

【讨论】：

如果我需要使用 而不是简单的链接...？我正在用 reactjs 写， 允许我在我的页面之间重定向...

一个问题，我在一个 svg 中有大约 6+- 个对象（），我需要将链接分配给所有这些对象，但在这个解决方案中，我只能将链接分配给整个svg .. 对某些

没有

你太棒了！！ :D 再次感谢。

嗨，请更正式地格式化问题并开始一个新的 SO 问题来问它。最好为其他人提供一些实时代码库。其他人也可能会提供帮助。