ReactJS：将 svg Emoji 插入 SVG 的 Rect答案

【问题标题】：ReactJS : insert svg Emoji into Rect of SVGReactJS：将 svg Emoji 插入 SVG 的 Rect
【发布时间】：2016-10-24 02:17:43
【问题描述】：

我是 ReactJs 的新手，正在研究 SVG，
下面的 ReactJS 代码 sn-p 创建了 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>

你能帮帮我吗？谢谢。

【问题讨论】：

您必须用图案填充矩形元素并配置图案，以便它拥有您想要的图像。

标签： html user-interface svg reactjs react-jsx

【解决方案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 与矩形的大小不同，则可能会有偏移。

【讨论】：