svg - 未定义图像上 href 的 SVG 命名空间前缀 xlink
问题描述
我有一个看起来有点像这样的 svg 内容:
<svg height="1000" preserveaspectratio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);" viewbox="0 0 1000 1000" width="1000"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clippath id="__lottie_element_2">
<rect height="1000" width="1000" x="0" y="0"></rect>
</clippath>
<clippath id="__lottie_element_4">
<path d="M0,0 L3048,0 L3048,2431 L0,2431z"></path>
</clippath>
</defs>
<g clip-path="url(#__lottie_element_2)">
<g clip-path="url(#__lottie_element_4)" opacity="1" style="display: block;" transform="matrix(0.5006899833679199,0,0,0.5006899833679199,-263.051513671875,-180.58868408203125)">
<g class="H01 2k" opacity="1" style="display: block;" transform="matrix(0.9999813437461853,0.006108480971306562,-0.006108480971306562,0.9999813437461853,504.42333984375,488.25836181640625)">
<image height="1442px" preserveaspectratio="xMidYMid slice" width="2048px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAA...MC2S3oHLwAAAABJRU5ErkJggg=="></image>
</g>
<g opacity="1" style="display: block;" transform="matrix(0.9947565197944641,-0.10227109491825104,0.10227109491825104,0.9947565197944641,452.203369140625,619.6126708984375)">
<image height="1442px" preserveaspectratio="xMidYMid slice" width="2048px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAAA...BJRU5ErkJggg=="></image>
</g>
<g opacity="1" style="display: block;" transform="matrix(0.9999813437461853,0.006108480971306562,-0.006108480971306562,0.9999813437461853,504.40704345703125,490.92486572265625)">
<image height="1442px" preserveaspectratio="xMidYMid slice" width="2048px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAAAAAWiCAYA...3+XcSAElFTkSuQmCC"></image>
</g>
<g opacity="1" style="display: block;" transform="matrix(0.9999813437461853,0.006108480971306562,-0.006108480971306562,0.9999813437461853,504.42333984375,488.25836181640625)">
<image height="1442px" preserveaspectratio="xMidYMid slice" width="2048px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAAAAAWiCA...AAASUVORK5CYII="></image>
</g>
</g>
</g>
</svg>
这是原始文件。
但是每当我尝试通过浏览器显示它时,我都会收到此错误:
This page contains the following errors:
error on line 1 at column 982067: Namespace prefix xlink for href on image is not defined
Below is a rendering of the page up to the first error.
我不知道为什么。请问怎么了?
解决方案
该<svg>
元素缺少xlink
命名空间的声明,尽管它在<image>
元素中使用。所以只需添加如下:
<svg height="1000" preserveaspectratio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);" viewbox="0 0 1000 1000" width="1000"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
SVG2 弃用了属性的xlink
命名空间。href
. 因此,在将来,更改xlink:href="..."
为href="..."
将是更好的解决方案。
推荐阅读
- python - pymongo 程序中的意外令牌“$”
- adcolony - 使用 adcolony 与另一个网络进行调解
- html - 组件中定义的角度样式不适用
- vue.js - Vue路由器使用参数打开一个新选项卡(参数为空)
- python - Django - 在基于类的视图中访问模型字段
- c++ - 可以使用 C++20 范围就地修剪字符串吗?
- debugging - 跟踪/基准测试 Haskell 函数
- javascript - 在 reactjs 功能组件中使用 setInterval() 时未按预期递增
- discord.js - 加入时将 MEMBER 添加到用户名
- javascript - 宏任务和微任务练习