ReactJS: insert svg Emoji в Rect of SVG

-1

Я новичок в ReactJs и работает над SVG,
Следующий фрагмент кода ReactJS создает 9 плиток, заполненных разными цветами.ReactJS: insert svg Emoji в Rect of SVG

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;

в Emojis в IMG/SVG/1f3c8.svg

Мое требование необходимо вставить Emojis в некоторых из плиток (Rect плиток), как показано изображение.
Я пробовал следующие способы. но я не мог этого сделать.

<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>

Не могли бы вы помочь мне. Благодарю.

источник

2016-06-22 Ravichandra

Вам нужно будет заполнить прямоугольные элементы шаблоном и настроить шаблон, чтобы он содержал требуемое изображение. –

Самое простое решение просто добавить свои Emoji элементы в конец файла 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>

Если X и Y атрибуты ребенка SVG (в один для emoji) соответствуют X и Y прямоугольника, который он должен быть закончен. Возможно, смещение, если ваш SVG-образчик не такой же, как прямоугольники.

источник

2016-06-22 15:35:41

ответ

Смежные вопросы