自定义 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