React JSX - заполнение SVG с изображением - PullRequest
Новая
       24

React JSX - заполнение SVG с изображением

1 голос
/ 16 марта 2020

Я пытаюсь заполнить простой кружок SVG изображением в React. Источники, которые я нашел, не были полезны, поскольку они, кажется, не относятся к JSX.

Вот код, который у меня есть в настоящее время: 

import React, {Component} from 'react';
import Anime from '../images/Anime.jpeg';


class Circle extends Component {
    render() {
        return (
            <div>
                <svg height="300" width="300">
                    <circle cx="150" cy="150" r="100" stroke="black" stroke-width="3" fill={Anime} />
                </svg>
            </div>
        );
    }
}

export default Circle;

Моим первым инстинктом было настроить Атрибут fill путем замены исходного цвета ="red" на ={Anime} или =url("../images/Anime.jpeg"), но ни один из них не работает.

(Я знаю, что путь к аниме-изображению правильный, после тестирования его рендерингом <img src={Anime} alt={Anime}></img> внутри div.

Я вижу людей, использующих теги <defs> и <pattern> как таковые (ссылаясь на этот пост ): 

<svg id="graph" width="100%" height="400px">

  <!-- pattern -->
  <defs>
    <pattern id="image" x="0%" y="0%" height="100%" width="100%"
             viewBox="0 0 512 512">
      <image x="0%" y="0%" width="512" height="512" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image>
    </pattern>
  </defs>

  <circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
</svg>

Но эти теги, похоже, не работают в React / JSX, я продолжаю получать эту ошибку, когда пытаюсь их использовать: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning.

Есть ли способ обойти это? Я хочу, чтобы соответствовать следующим изображение в простой кружок SVG с толстой черной рамкой вокруг него.

enter image description here

1 Ответ

0 голосов
/ 17 марта 2020

Я нашел способ и хотел бы опубликовать / поделиться им, на случай, если кто-нибудь здесь, просматривает этот пост и задается вопросом, каково (одно из) решение (я)!

Вот мой окончательный код: 

import React, {Component} from 'react';
import AnimeCropped from '../images/AnimeCropped.png';


class Circle extends Component {
    render() {
        return (
            <div>
                <svg height="670" width="670">
                    <circle cx="350" cy="350" r="300" stroke="black" stroke-width="5" fill="none" />
                    <image className='img-circle' xlinkHref={AnimeCropped} x='75.5' y="15" height="670" width="670"/>
                </svg>
            </div>
        );
    }
}

export default Circle;

По сути, я сделал следующее:

  1. Обрежьте фотографию, чтобы она была кругом. Я мог бы следовать рекомендации cubrr выше и закрепить ее (это отличная идея!), Но вместо этого - я просто нашел и использовал инструмент для обрезки фотографий в Интернете. Затем я назвал только что обрезанное изображение «AnimeCropped» и сохранил его в том же каталоге.

  2. Импортировал изображение в файл компонента и отображал его с помощью тега <image> после <circle> тег. Это не упоминалось в моем первоначальном вопросе выше, но я также предположил, что вставка изображения внутри круга может решить проблему. Таким образом: 

<svg height="670" width="670">
   <circle cx="350" cy="350" r="300" stroke="black" stroke-width="5" fill="none">
      <img src={AnimeCropped} alt={AnimeCropped}/>
   </circle>
</svg>

Но это не сработало.

В моем последнем коде вы увидите, что тег <image> идет после <circle> тег, так что технически это не внутри круга, а просто наложение поверх него. Также обратите внимание, что мне пришлось использовать <image>, а не <img>. Мне придется немного изучить это, но <img> выдавало мне сообщение об ошибке.

Также важно: в React xlink:href не будет работать, но xlinkHref будет! Это действительно сбило меня с толку, но я нашел это полезным post .

Используя classNames, я отредактировал размер обрезанного изображения в моем приложении. css файл.

Настроил координаты x и y так, чтобы он несколько идеально вписывается в середину круга.

Вот и все! Просто хотел опубликовать это для закрытия / помочь мне просмотреть то, что я узнал.

...