文章详情页
css - 关于svg使用的问题
问题描述
设计师让我不兼容svg的用他给的png图片,兼容svg的 就用svg;这个兼容问题,我看到张鑫旭的博客的写法如下。
<svg height='96'> <image xlink:href='https://www.haobala.com/wenda/svg.svg' src='https://www.haobala.com/wenda/svg.png' /></svg>
但是,我发现这样写的话鼠标移动到svg上,我给他设置fill颜色,他是不起效果的。我现在用svg标签写如下图
这样子写法变色是可以操作了,但是这样写怎么写兼容呢?。我该怎么处理,让他不管在兼容svg或者不兼容svg用图片,都能够实现鼠标经过变色。谢谢各位朋友了
问题解答
回答1:通常不兼容的情况都发生在 IE 里,如果是解决 IE 的兼容性问题,其实可以使用 <!--[if lt IE]> 这样的东东。然后使用 css 把 svg 或者图片 display:none 掉。更具体的做法是:使用 <!--[if lt IE x]> 给 html tag 加一些 class。至于 svg 的兼容性,得去查一下 Can I Use。
回答2:使用xlink:href时,引用的外部svg文件或者symbol里,把需要从父级继承的属性(fill等) 改成 inherit 就行。
标签:
CSS
相关文章:
1. javascript - 引入 simditor,但是显示标签,这个怎么解决。2. angular.js - 学习ng路由模块遇到点击链接到锚点时URL后面多出个#!是怎么回事3. angular.js - 如何让图片遇到父容器边缘自动换行显示,不会溢出4. angular.js - 关于ui-sref地址栏缺省的问题5. angular.js - 全站用的angular,但是像下面描述的这样强交互的功能用angular该用什么思路去做呢?6. android - 目前有哪些用Vue.js开发移动App的方案?7. index.php错误,求指点8. 只有一条数据9. 当前访问路由未定义或不匹配,怎么解决这个问题10. 横屏滑动的怎么做
排行榜