ReactJS：将 svg Emoji 插入到 SVG 的 Rect 中

Question

我是 ReactJs 的新手，正在研究 SVG，
以下 ReactJS 代码片段创建了 9 个填充不同颜色的图块。

import React from 'react';
class SvgRectDashboard extends React.Component {
  render(){
    var svgText = (<svg height="170px" width="364px" xmlns="http://www.w3.org/2000/svg">
       <g transform="translate(0,0)">
          <rect x="0" y="0" width="118" height="55" fill="#FFCC99" stroke="rgb(0,0,0)" id="rect11"></rect>
          <rect x="0" y="55" width="118" height="55" fill="#FFCC66" stroke="rgb(0,0,0)" id="rect12"></rect>
          <rect x="0" y="110" width="118" height="55" fill="#FFCC33" stroke="rgb(0,0,0)" id="rect13"></rect>
          <rect x="118" y="0" width="118" height="55" fill="#FFCC00" stroke="rgb(0,0,0)" id="rect21"></rect>
          <rect x="118" y="55" width="118" height="55" fill="#FF9600" stroke="rgb(0,0,0)" id="rect22"></rect>
          <rect x="118" y="110" width="118" height="55" fill="#FF9600" stroke="rgb(0,0,0)" id="rect23"></rect>
          <rect x="236" y="0" width="118" height="55" fill="#FF9700" stroke="rgb(0,0,0)" id="rect31"></rect>
          <rect x="236" y="55" width="118" height="55" fill="#FF9933" stroke="rgb(0,0,0)" id="rect32"></rect>
          <rect x="236" y="110" width="118" height="55" fill="#FF6600" stroke="rgb(0,0,0)" id="rect33"></rect>
       </g>
      </svg>);
    return (<div>{svgText}</div>);
  }
}
module.exports = SvgRectDashboard;

表情符号在 img/svg/1f3c8.svg

我的要求是需要在一些图块（矩形图块）中插入表情符号，如图所示。
我尝试了以下方法。但是我做不到。

<rect x="0" y="0" width="118" height="55" fill="background:'url(img/svg/1f600.svg)" stroke="rgb(0,0,0)" id="rect11"></rect>

<rect x="0" y="55" width="118" height="55" style={background:'url(img/svg/1f600.svg)} stroke="rgb(0,0,0)" id="rect11"></rect>

你能帮帮我吗？谢谢

Answer 1

最简单的解决方案就是将表情符号元素添加到 SVG 文件的末尾。适当放置它们。

您没有提供您的表情符号之一的示例，所以我使用绿色圆圈作为替代。

<svg height="170px" width="364px" xmlns="http://www.w3.org/2000/svg">
       <g transform="translate(0,0)">
          <rect x="0" y="0" width="118" height="55" fill="black" stroke="rgb(0,0,0)" id="rect11"></rect>
          <rect x="0" y="55" width="118" height="55" fill="#FFCC66" stroke="rgb(0,0,0)" id="rect12"></rect>
          <rect x="0" y="110" width="118" height="55" fill="#FFCC33" stroke="rgb(0,0,0)" id="rect13"></rect>
          <rect x="118" y="0" width="118" height="55" fill="#FFCC00" stroke="rgb(0,0,0)" id="rect21"></rect>
          <rect x="118" y="55" width="118" height="55" fill="#FF9600" stroke="rgb(0,0,0)" id="rect22"></rect>
          <rect x="118" y="110" width="118" height="55" fill="#FF9600" stroke="rgb(0,0,0)" id="rect23"></rect>
          <rect x="236" y="0" width="118" height="55" fill="#FF9700" stroke="rgb(0,0,0)" id="rect31"></rect>
          <rect x="236" y="55" width="118" height="55" fill="#FF9933" stroke="rgb(0,0,0)" id="rect32"></rect>
          <rect x="236" y="110" width="118" height="55" fill="#FF6600" stroke="rgb(0,0,0)" id="rect33"></rect>
       </g>
  
       <circle id="pretend-emoji" cx="59" cy="27" r="20" fill="green"/>
 </svg>

如果您的表情符号 SVG 只包含一个表情符号，那么您可以这样做：

<svg height="170px" width="364px" xmlns="http://www.w3.org/2000/svg">
       <g transform="translate(0,0)">
          <rect x="0" y="0" width="118" height="55" fill="black" stroke="rgb(0,0,0)" id="rect11"></rect>
          <rect x="0" y="55" width="118" height="55" fill="#FFCC66" stroke="rgb(0,0,0)" id="rect12"></rect>
          <rect x="0" y="110" width="118" height="55" fill="#FFCC33" stroke="rgb(0,0,0)" id="rect13"></rect>
          <rect x="118" y="0" width="118" height="55" fill="#FFCC00" stroke="rgb(0,0,0)" id="rect21"></rect>
          <rect x="118" y="55" width="118" height="55" fill="#FF9600" stroke="rgb(0,0,0)" id="rect22"></rect>
          <rect x="118" y="110" width="118" height="55" fill="#FF9600" stroke="rgb(0,0,0)" id="rect23"></rect>
          <rect x="236" y="0" width="118" height="55" fill="#FF9700" stroke="rgb(0,0,0)" id="rect31"></rect>
          <rect x="236" y="55" width="118" height="55" fill="#FF9933" stroke="rgb(0,0,0)" id="rect32"></rect>
          <rect x="236" y="110" width="118" height="55" fill="#FF6600" stroke="rgb(0,0,0)" id="rect33"></rect>
       </g>

       <svg x="0" y="0" xlink:href="img/svg/1f600.svg"/>
 </svg>

其中子 SVG（表情符号的属性）的 X 和 Y 属性对应于它应该结束的矩形的 X 和 Y。如果您的表情符号 SVG 与矩形的大小不同，则可能会有偏移量。

ReactJS：将 svg Emoji 插入到 SVG 的 Rect 中

ReactJS : insert svg Emoji into Rect of SVG

html

user-interface

svg

reactjs

react-jsx