React JSX - 用图像填充 svg答案

【问题标题】：React JSX - Filling an svg with an imageReact JSX - 用图像填充 svg
【发布时间】：2020-06-27 03:36:32
【问题描述】：

我正在尝试用 React 中的图像填充一个简单的圆形 SVG。我发现的资源没有帮助，因为它们似乎不适用于 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")，但都不起作用。

（我知道动漫图像的路径是正确的，在通过在 div 内渲染 <img src={Anime} alt={Anime}></img> 对其进行测试之后。

我看到有人使用<defs> 和<pattern> 标签，因此（参考this post）：

<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 中，周围有一个粗黑边框。

【问题讨论】：

您可以使用clip-path 剪辑图像。 this article 中有一个例子，搜索“Using clip-path with an SVG-defined ”。

标签： reactjs svg jsx fill

【解决方案1】：

我想出了一个方法并想发布/分享它，以防有人在这里，看着这篇文章并想知道（一个）解决方案是什么！

这是我的最终代码：

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;

基本上我所做的是：

将照片裁剪为圆形。我本可以按照上面 cubrr 的建议并对其进行剪辑路径（这是一个好主意！），但相反 - 我只是在网上找到并使用了一个照片裁剪工具。然后我将新裁剪的图片命名为“AnimeCropped”并将其保存在同一目录中。
将图片导入组件文件，并通过<circle>标签后的<image>标签进行渲染。在我上面的原始问题中没有提到它，但我还假设将图像插入圆圈内可能会解决问题。因此：

<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，我在 App.css 文件中编辑了裁剪图片的大小。
配置了 x 和 y 坐标，使其在某种程度上完全适合圆的中间。

就是这样！只是想发布这个以结束/帮助我回顾我学到的东西。

【讨论】：