svg 矢量图 在移动端 ios 模糊的处理方法

最新推荐文章于 2024-08-18 20:48:01 发布
最新推荐文章于 2024-08-18 20:48:01 发布
阅读量872 收藏 3
点赞数 3
文章标签： ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wax9092/article/details/137450854
版权

多倍图

svg 在安卓不会存在模糊问题，在ios 却恰恰相反。建议使用多倍图，适配移动端

<img src="xx@2x.png">

iframe

<iframe src="xxx.svg"></iframe>

虽然可以解决模糊问题，但是会存在适配问题，不推荐

object

<object type="image/svg+xml" data="xxx.svg"></object>

虽然可以解决模糊问题，但是会存在适配问题，不推荐


 

wax9092
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端使用svg图标的时候，苹果手机出现模糊问题的原因
宋承佑
07-26 4270
结果： 这个问题主要是使用了<img src="asda.png">标签导致的。 原因： 1、为什么使用img在苹果手机上出现模糊的效果？ img标签引入的svg在苹果浏览器是无法支持的，会被直接解析成普通图片的格式（.png\.jpg）。 所以就会出现安卓手机上一点都不模糊，而苹果手机却模糊的要死。 解决办法： 采用iframe、object来加载。 <iframe src="abc.svg"></iframe> <!--或者--> <object t
SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签
尐轩web前端网络日志
01-17 3758
今天主要谈一下SVG的特殊效果 其实和canvas都是差不多的，只不过是利用XML标签 用的不是很多但是以防以后万一用到还是整理一下图片添加svg中也可以添加图片<svg width=300 height=300> <image xlink:href="./images/d.jpg" x=100 y=100 height=100 width=100></image> </svg>注意这里
用UIWebView加载SVG图片
bolu的专栏
07-28 2219
svg图片其实一般用浏览器可以直接打开的
svg格式图片在ios下显示模糊问题
weixin_49374428的博客
06-07 2147
svg格式图在ios下显示模糊
svg模糊或不显示问题
weixin_45240168的博客
04-17 7359
问题简述 １．项目中使用的ｓｖｇ在苹果手机移动端，微信内置链接打开显示模糊。 ２.　经过查找资料，可以使用＜ｏｂｊｅｃｔ＞标签来嵌套ｓｖｇ可以解决ｓｖｇ模糊问题。 ３.　使用＜ｏｂｊｅｃｔ＞标签引发的问题，部分ｓｖｇ失去了点击事件的功能，经查证，不能点击的ｓｖｇ是因为在＜ｏｂｊｅｃｔ＞标签内的点击事件失效，把点击事件添加到父级元素即可。 ４.　经过一天时间，大量的ｓｖｇ不显示，原因是＜ｏｂｊｅｃｔ＞标签存在浏览器兼容问题，在手机其他浏览器中均可正常显示，但是使用微信内置的浏览器打开ｓｖｇ就不显示。 问题分析
可直接使用SVG图片不失真
05-15
日常开发工具，直接使用SVG图片，不会失真；日常开发工具，直接使用SVG图片，不会失真；日常开发工具，直接使用SVG图片，不会失真；日常开发工具，直接使用SVG图片，不会失真。
iOS 加载SVG文件
03-21
iOS 加载SVG文件，svg地图，点击获取地图上点击的位置
iOS的webView里面打开相册看不清取消字体
koocui的博客
11-09 514
今天改了一个小bug，在我们app里面嵌入了一个web页面，这个web页面有选择图片功能；但是打开相册后看不清取消按钮，因为白底和白字。 尝试了几次，还是把相册的导航栏设置成和本app一样的样色就好了；在web嵌入的VC里面加入这段代码：   UINavigationBar.appearance().barTintColor = UIColor.redColor()
向量图svg转jpg、png不清晰问题
qq_14951447的博客
11-02 1945
svg转png、jpg不清晰问题
SVG字体模糊的解决方法
王之白石的博客
06-21 4641
svg字体模糊
移动端1px模糊产生的原因以及解决方案
热门推荐
alightman的博客
11-27 1万+
PPI是Pixels Per Inch缩写，pixels per inch所表示的是每英寸所拥有的像素（pixel）数目。手机屏幕的PPI当达到一定数值时，人眼就分辨不出颗粒感了。   “当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300ppi这个‘神奇数字’（每英寸300个像素点）以上，你的视网膜就无法分辨出像素点了。”——乔布斯 4.3英寸、分辨率...
记项目中png/jpg图片文字模糊之svg解决要点
jieyingxiao的博客
08-11 2887
png/jpg的logo图片中文字部分放大后，会出现模糊。至于为什么不直接使用大图，是因为项目中图片是嵌入在td中，直接使用大图会撑大td，当然可能有些人建议使用CSStransform:scale(1)来缩小图片，再调整td大小，我没尝试过，不知是否可行。主要是我的应用场景是在打印中使用logo，不是在页面静态中使用，涉及打印时动态加载及打印页面放大问题。 解决方案：使用S...
svg图片在ios上的使用
linwwwei
12-23 1671
1：从UI设计师那里得到的是每个svg图通过网站icomoon.io这个网站生成ttf格式的图片 步骤：a.点击IcoMoon APP按钮 b.点击Import Icons(这里就是UI设计的svg图片) c.选中需要生成的图片，点击右下角的Generate Font按钮 d.全部沿用默认设置，点击右下角Download按钮下载 下载包中就有我们包含的t...
svg矢量图无失真转换方法
04-06 5749
svg矢量图不能直接插入word之中，如果想在word中使用，网上提供了一些方法可供参考，有采用visio软件，将svg图导入，然后以emf导出。但是我的svg导入visio后，严重失真，图的颜色变成了灰色，图中文字被加了边框。因此，如遇到类似情况，可以考虑下载矢量图编辑工具Inkscape，该工具下载的网址：https://inkscape.org/。 下载安装后，打...
SVG格式图片的放大
Burning1108的博客
03-05 5144
SVG是一种矢量格式图片，即可以无损放缩，其存储的是图像中每个元素的定义，如方块、椭圆等。越来越多的网站采用SVG格式来表达图表。但是SVG格式并不能像png、jpj那样直接拖拽防缩，但只要稍微修改源代码简单的无限放大。
svg模糊图片局部清晰透视图
一个慢的博客
12-18 1378
demo下载地址： http://download.csdn.net/download/one_girl/10163426 html代码：<body> <div class="header"> <div class="head_img"> //该图片用于撑起整个header区域 <img src="images/banner.j
IOS 09 R.swift框架和使用方法
最新发布
sziitjin的博客
08-18 480
R.swift框架主要是实现通过类字段访问字符串，图片，等资源；类似Android那边通过R类访问，好处是有提示，如果缺少资源，直接就是编译错误；OC类似的功能叫R.objc。
vue使用svg矢量图
09-03
在Vue中使用SVG矢量图，你可以按照以下步骤进行配置： 1. 首先，确保你的项目中有一个存放SVG图标的文件夹，比如`src/icons`。在这个文件夹中，你可以存放所有的SVG图标文件。 2. 在你的组件中，使用`<svg-icon>`组件来引用SVG图标。可以通过设置`icon-class`属性来指定SVG图标的名称，通过设置`className`属性来修改SVG图标的样式，比如大小和颜色。例如，`<svg-icon icon-class="tree" className="需要修改的样式" />`。 3. 配置`vue.config.js`文件，添加以下代码片段到`chainWebpack`方法中： ```javascript chainWebpack(config) { config.module .rule('svg') .exclude.add(resolve('src/icons')) // 注意svg的存储地址 .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) // 注意svg的存储地址 .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() } ``` 这段代码的作用是配置Webpack，使其能够正确地加载和处理SVG图标。其中，`exclude`和`include`方法用于指定SVG图标文件的存放地址，`svg-sprite-loader`用于加载和处理SVG图标文件，并通过`symbolId`选项设置图标的ID。 通过以上配置，你就可以在Vue项目中使用SVG矢量图了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue中如何使用svg](https://blog.csdn.net/weixin_47909202/article/details/123015710)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值