svg显示错误

最新推荐文章于 2023-10-22 01:58:14 发布
最新推荐文章于 2023-10-22 01:58:14 发布
阅读量734 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： IE Firefox .net XML Blog
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/leafrenchleaf/article/details/83810534
本文介绍如何在SVG元素上实现鼠标悬停时指针变为手形的效果，并解决了Firefox浏览器中因命名空间未声明导致的问题。同时，还讨论了在添加hover效果后，原有的onclick事件在Firefox中失效的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

转载http://blog.youkuaiyun.com/sclxf/archive/2009/09/20/4572051.aspx

如何在鼠标移动到特定的svg元素上时，将指针形状改为手状呢？

在希望发生效果的元素周围加上a xlink:href=""即可

如下所示：

<a xlink:href="">
<text id='xxx' x='250' y='250' fill='black' font-family='Verdana' font-size='10' onclick='hostTextonClick(evt)'>xxx </text>
</a>

但是在firefox中显示会出现错误，提示XML Parsing Error: prefix not bound to a namespace，解决办法是：

在svg文件开头补全xmlns，可以写上如下两个：<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">，就ok了。

至于IE就没这个问题。

但是加了a xlink:href=“”之后，

原有的onclick事件响应函数在firefox中不起作用了，在IE中还是没问题
javascript使用svg图片自定义cursor鼠标样式
Beca_H的博客
03-31 3426
cursor自定义鼠标样式（svg）cursor自定义样式 cursor自定义样式 cursor样式设置： 1、使用默认的样式； 2、cursor:url(“图片路径”)，此处图片类型需要是“.cur”或者“.ani”格式 3、如果图片文件为SVG格式：需要将文件做一下处理： const svgIcon = `<svg t="1585620942974" class="icon" viewB...
svg完成鼠标样式并使用
嘿嘿~
06-06 802
本次分享的是通过svg标签实现的鼠标样式，并在页面中进行使用的整个过程，最后还会分享快速制作svg的简单方式。如有改进的方法或者发现错误也可以在评论区留言啊。
svg cursor appearance 指针形状
sclxf的专栏
09-20 3346
如何在鼠标移动到特定的svg元素上时，将指针形状改为手状呢？ 在希望发生效果的元素周围加上a xlink:href=""即可如下所示：xxx  但是在firefox中显示会出现错误，提示XML Parsing Error: prefix not bound to a namespace，解决办法是：在svg文件开头补全xmlns，可以写上如下两个：     xmlns:
svg文件报错
weixin_30699831的博客
06-29 306
错误：The content of element type "font-face" is incomplete, it must match "((font-face-src,(desc|title|metadata)*)|((desc|title|metadata)+,font-face-src,((desc|title|metadata))*?))". 添加： <fo...
Error: postcss-svgo: Error in parsing SVG: Unquoted attribute value 无法解析svg
weixin_30426065的博客
01-30 1280
把SVG用双引号包起来 background-image: url("data:image/svg+xml;charset=utf-8,\"<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs&g...
将SVG转为cursor指针样式
weixin_41276201的博客
10-22 385
其中，_canvas.style.cursor = `url(SVG2Base64(svg)}) 16 16,auto`中的 16 16表示svg图片x,y轴的偏移量。下面是naive-ui推荐的svg库。
php-svg-lib：SVG文件解析呈现库
02-04
6. **社区支持与持续开发**：作为一个开源项目，PHP SVG Lib拥有活跃的开发者社区，不断进行错误修复、功能改进和新特性的添加，确保了其与最新PHP版本和SVG标准的兼容性。 在实际使用中，开发者可以通过以下步骤...
DelphiSVG:Delphi SVG库
05-04
4. **SVG操作**：除了加载和显示SVG，DelphiSVG还允许开发者修改SVG元素，如改变颜色、大小、位置等，甚至可以动态生成SVG内容。 5. **跨平台支持**：由于Delphi自身的跨平台特性，DelphiSVG库也能在Windows、macOS...
SVG绘制响应式404错误网页.zip
09-08
在这个“SVG绘制响应式404错误网页.zip”项目中，SVG技术被用来创建一个动态且富有创意的404错误页面，这种页面在用户尝试访问不存在的页面时会显示出来。以下是关于这个项目的一些关键知识点： 1. **404错误**：...
在Visual Studio中进行调试时查看SVG和其他HTML5内容
04-04
首先，SVG是一种基于XML的图形格式，允许在网页上创建和显示清晰、高质量的图形，而且它们可以被放大而不会失真。由于Visual Studio 2010的内置Web服务器不支持所有MIME类型，所以在尝试在调试模式下预览SVG文件时，...
23个404错误状态插画 .svg .sketch .fig素材下载
04-20
SVG图像的优点是可以无限缩放而不失真，文件大小小，且支持动画，这使得它们成为404错误页面的理想选择，因为它们可以在各种屏幕尺寸上清晰显示。 Sketch是一款流行的矢量图形编辑软件，主要面向UI/UX设计师。这些...
炫丽的html5鼠标移动svg圆圈光标动画特效
11-07
炫丽的html5鼠标移动svg圆圈光标动画特效 炫丽的html5鼠标移动svg圆圈光标动画特效
SVG pointer-events属性
u013905744的专栏
01-22 2442
The pointer-events attribute pointer-events属性允许作者控制一个元素是否是鼠标事件的目标。这个属性用于指定在哪些情况下鼠标事件(如果有的话)应该“通过”一个元素，目标是“下面”元素（一个元素覆盖到下一个元素上）
svg_鼠标手型
weixin_33859231的博客
01-12 323
1、 貌似是 属性 "cursor :pointer;"，待测试。 2、 转载于:https://www.cnblogs.com/CodeSkill/p/5123505.html
lottie升级后报错：lottie.js:6229 Error: ＜svg＞ attribute viewBox: Expected number, “0 0 undefined undefi…
关中刀客在青岛
11-10 2843
创建新项目，引入原项目的部分代码，发现一个用lottie导入的小图标动画不见了，但这个元素位置大小都对，只是看不见，就像透明度为0了。查看控制台，有报错： lottie.js:6229 Error: <svg> attribute viewBox: Expected number, "0 0 undefined undefi… 在源码中查找，位置在lottie.js:6229 行 if(this.renderConfig.viewBoxSize) { this.svgEle.
SVG/CSS钟表指针动画
ICode联盟
06-29 164
下载地址SVG/CSS钟表指针动画，很酷的钟表走动效果，颜色变化闪烁。dd:
改变鼠标自定义样式
热心市民裴先生的博客
02-15 634
·作为前端工程师 肯定要知道网页的一些冷知识嘛 最近新get了一个新技能 改变鼠标的样式 1, 首先准备一张.ico 格式 32x32 的图片     如果没有的话  准备一张png格式的图片 到https://www.easyicon.net/covert/ 转化一下就ok了 2,下面就是写css的样式了 注意图片的路径..... 是不是很简单......
svg的告诫
weixin_30235225的博客
09-12 399
转自：SVG Authoring Guidelines在这篇文章里，作者列出了出现在很多SVG作品中的坏习惯，这些都可能会造成一些兼容的问题，只是Adobe的SVG Viewer忽略了这些错误（非标准的东西）。现在SVG还在发展初期，希望大家不要像在写HTML的时候被IE养成坏习惯一样给Adobe SVG Viewer养成坏习惯。目前Adobe对SVG的支持还是未知数，如果大家希望自己的基于SVG...
[BUG记录] jsPlumb 报错：Error: ＜svg＞ attribute width: Expected length, “-Infinity“. 的解决方案
博客
03-13 1790
[BUG记录] jsPlumb 报错：Error: attribute width: Expected length, "-Infinity". 的解决方案
svg图标不显示
最新发布
03-26
<think>好的，我现在需要解决用户在Vue项目中遇到的SVG图标不显示的问题。首先，我需要根据用户提供的引用内容，整理可能的原因和解决方案。用户已经给出了四个引用，里面提到了路径检查、require语法、Vue组件导入、Vue-Awesome插件、CSS样式、fill属性冲突、Ant Design图标库和Element Plus的图标命名规范等。 首先，我应该按照逻辑顺序列出可能的原因，然后对应每个原因给出解决方案。常见的排查步骤通常是从简单到复杂，比如先检查文件路径是否正确，然后查看语法是否正确，接着考虑组件使用方式，最后处理样式或属性冲突。 用户提到的引用[1]提到了检查SVG路径和文件是否正确，使用require导入，Vue组件导入，Vue-Awesome插件，以及CSS样式。这应该是基础检查步骤。接着引用[2]指出fill属性可能被原SVG代码中的属性覆盖，导致修改失效，需要删除原有fill属性。引用[4]提到Element Plus的图标导入时需要使用驼峰命名法，并且名称大写，这可能是一个常见错误点。 需要将这些信息整合成一个清晰的列表，分点说明原因和对应的解决方法。同时，用户可能需要知道如何具体操作，比如如何用require导入，如何检查CSS样式，或者如何修改SVG文件中的fill属性。此外，引用[3]推荐了Ant Design图标库，可能作为替代方案，如果用户的问题无法解决，可以考虑使用现成的图标库来避免手动处理SVG的问题。 在整理过程中，要注意使用正确的中文表达，确保每个步骤清晰易懂。同时，按照用户的要求，使用行内数学表达式时要用$...$，但这里可能用不上数学公式，所以可能不需要。但需要确保LaTeX语法正确，不过问题中可能不涉及LaTeX公式。另外，生成相关问题部分需要提出与SVG显示问题相关的扩展问题，比如优化方法、其他常见问题或图标库推荐等。 最后，确保回答结构符合用户的要求，分点列出原因和解决方案，并在末尾添加相关问题。同时，引用标注要正确对应，比如[^1]到[^4]分别对应提供的四个引用内容。</think>### SVG图标不显示的原因及解决方案 #### 一、常见原因及排查步骤 1. **文件路径错误** - **现象**：控制台报错提示文件未找到。 - **解决方案**： 确保SVG文件路径正确，绝对路径或相对路径需与代码一致。 使用`require`语法动态加载路径（适用于Vue）： ```vue <img :src="require('@/assets/icon.svg')" /> ``` [^1] 2. **SVG组件未正确导入** - **现象**：组件未渲染或显示空白。 - **解决方案**： 使用Vue组件形式导入SVG文件： ```vue <template> <MySVGIcon /> </template> <script> import MySVGIcon from '@/assets/icon.svg'; export default { components: { MySVGIcon } }; </script> ``` 3. **CSS样式冲突** - **现象**：SVG颜色或尺寸异常。 - **解决方案**： 检查父容器的CSS是否覆盖了SVG属性（如`fill`、`stroke`）。 添加`!important`强制生效（慎用）： ```css svg path { fill: red !important; } ``` 4. **原SVG包含内联fill属性** - **现象**：通过props传递`fill`属性无效。 - **解决方案**： 打开SVG文件，删除代码中的`fill="..."`属性，确保外部样式可覆盖。 ```xml <!-- 修改前 --> <path fill="#000" d="..."/> <!-- 修改后 --> <path d="..."/> ``` [^2] 5. **图标命名规范错误（Element Plus为例）** - **现象**：图标未显示且无报错。 - **解决方案**： 确保导入时使用**驼峰命名法**，例如： ```vue <template> <Aim /> </template> <script> import { Aim } from '@element-plus/icons'; // 首字母大写 </script> ``` [^4] #### 二、推荐工具与库 - **Vue-Awesome插件**：集成Font Awesome图标库，避免手动管理SVG文件。 - **Ant Design图标库**：提供标准化SVG图标，支持按需加载[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值