自定义 SVG 未加载到我的图像标签中

Posted

技术标签:

【中文标题】自定义 SVG 未加载到我的图像标签中【英文标题】:Custom SVG is not loading in my image tag 【发布时间】:2021-10-28 09:58:10 【问题描述】:

目前我正在尝试在图像标签内加载我的自定义 svg 组件。但由于某种原因,我无法看到地图组件内的 svg 图像。我的自定义 SVG 文件就是这样,我在 SVG 中加载另一个图像:

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 850 1090" preserveAspectRatio="xMidYMid meet">

  <clipPath id="clip">
    <path id="path" transform="translate(0,1090) scale(1,-1)" d="M406 1035 c-32 -49 -201 -104 -323 -105 l-43 0 0 -282 c0 -277 1
    -284 24 -333 39 -82 146 -174 291 -250 l67 -34 61 31 c151 76 265 170 303 253
    23 49 24 57 24 330 l0 281 -103 12 c-124 13 -206 42 -252 87 l-33 34 -16 -24z" />
  </clipPath>

  <image x="-200" y="30"   clip-path="url(#clip)" xlink:href="https://assets.codepen.io/222579/darwin300.jpg" />

  <use xlink:href="#path" fill="none" stroke="gold" stroke- />
</svg>

而我的图片标签是这样的:

<img src="icon.svg"/>

但是当我去检查网络标签时,它显示的是:

代码沙盒:https://codesandbox.io/s/full-popup-mapbox-***-forked-6rupe?file=/src/App.js

【问题讨论】:

【参考方案1】:

老实说,我不确定codeandbox 中的外部/跨域图像资源是否存在问题(也可能是本地开发的问题)。标记的duplicate Robert 让我相信问题出在这个特定的 SVG 资产本身。

不过还是有办法渲染的。

将 svg 图像导入为 ReactComponent 并渲染它而不是 img 标记。

Source

import  ReactComponent as Icon from "./icon.svg";

...

<Icon
  style=
    width: 48,
    height: 48
  
  onMouseEnter=() => 
    setSelectedProperty(item);
    setIsPopupShown(true);
  
  onMouseOut=() => 
    setSelectedProperty(null);
    setIsPopupShown(false);
  
/>

【讨论】:

以上是关于自定义 SVG 未加载到我的图像标签中的主要内容,如果未能解决你的问题,请参考以下文章

我的 Joomla 模板正在使用 JS 加载我的自定义 CSS。有没有办法将唯一版本标签添加到我的自定义 CSS 中?即:custom.css?20180101

如何在颤动中自定义标签栏宽度?

添加自定义加载微调器(SVG)reactjs

如何加载保存到我的标记 ID 的图像并显示在该特定标记的自定义信息窗口中?

在 woocommerce 中自定义新帐户电子邮件模板

如何固定表格视图中自定义单元格文本字段的标签值?