开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么我的内联svg不能在Safari (桌面和移动)上正确显示？

内联SVG在Safari上无法正确显示的原因可能有以下几个方面：

Safari对内联SVG的支持不完善：Safari在处理内联SVG时可能存在一些兼容性问题，导致无法正确显示。这可能是由于Safari对SVG标准的实现不完全或存在一些Bug所致。
SVG代码错误：内联SVG的代码可能存在一些语法错误或不规范的写法，导致Safari无法正确解析和渲染SVG图像。在编写SVG代码时，需要确保语法正确、标签闭合、属性值正确等。
SVG特性不支持：Safari可能不支持某些SVG特性或属性，导致无法正确显示。在使用SVG时，需要注意使用Safari支持的特性和属性，避免使用不被支持的特性。

解决这个问题的方法可以尝试以下几种：

检查SVG代码：仔细检查内联SVG的代码，确保语法正确、标签闭合、属性值正确等。可以使用在线SVG验证工具或SVG编辑器来检查和修复SVG代码。
使用外部SVG文件：将SVG代码保存为外部文件，然后通过<img>标签或CSS的background-image属性引入SVG文件。这种方式可以避免一些兼容性问题，并且更易于维护和管理。
使用SVG转换工具：尝试使用SVG转换工具将内联SVG转换为其他格式，如PNG或JPEG。这样可以确保在所有浏览器中都能正确显示图像，但可能会损失一些SVG的可缩放性和交互性。
使用特定的SVG库或框架：某些SVG库或框架可能提供了更好的兼容性和跨浏览器支持。可以尝试使用这些库或框架来处理SVG图像，以提高在Safari上的显示效果。

腾讯云相关产品和产品介绍链接地址：

腾讯云图像处理（https://cloud.tencent.com/product/tci）
腾讯云音视频处理（https://cloud.tencent.com/product/mps）
腾讯云人工智能（https://cloud.tencent.com/product/ai）
腾讯云物联网（https://cloud.tencent.com/product/iotexplorer）
腾讯云移动开发（https://cloud.tencent.com/product/mobdev）
腾讯云存储（https://cloud.tencent.com/product/cos）
腾讯云区块链（https://cloud.tencent.com/product/baas）
腾讯云元宇宙（https://cloud.tencent.com/product/vr）

相关搜索:为什么我的响应式站点不能在移动浏览器上正确显示？我的ASP.NET桌面网站布局无法在移动设备上正确显示为什么我的绘图图像不能在dash应用程序上正确显示为什么这个SVG路径在Firefox上显示不正确的宽度和高度？为什么我的导航在开发工具和移动设备上显示不同我的应用程序使用"create-react- App“创建，显示在桌面和移动设备上，但不显示在移动设备iOS上在xhr readyState和状态检查中，为什么组件不能在屏幕上显示正确的值为什么Html字段集图例不能在safari浏览器或iphones上运行的Ionic应用程序中正确显示？当我在手机或Safari上浏览我的网页时，为什么我的CSS网格和图像的flexbox显示空白？为什么我的字体大小在firefox和chrome移动浏览器上显示不同？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了！

在下面的例子中，同样的按钮在 Chrome 和 Safari 中，后者添加了默认的灰色背景。 ?...在移动设备上，浏览器会显示一个水平滚动条。 ? 解决方法就是使用 flex-wrap: wrap，这样当水平空间不够时，浏览器会帮我们自动换行。...长单词和链接当在移动屏幕上阅读一篇文章时，一个长单词或内联链接可能会导致出现水平滚动条。使用CSS word-break可以防止这种情况的发生 ?...向 SVG 添加 fill 有时，在使用 SVG 时，如果在 SVG 中以内联方式添加了fill属性，填充就不会像预期的那样工作。...为 input 添加正确的 type 为 input 添加正确的 type，会增强移动浏览器中的用户体验，并使其更易于用户访问。

3.7K1 0

「译」前端项目中常见的 CSS 问题

下面的例子分别展示了 Chrome 和 Safari 中的同一个按钮，后者默认会有一个灰色背景。...长词和链接在手机屏幕上浏览文章的时候，一个长词或者内联链接可能会导致页面出现水平滚动条。使用 CSS 的 word-break 可以防止这个问题。...透明渐变当使用透明起点和终点添加渐变的时候，在 Safari 下会呈现一片漆黑。这是因为 Safari 无法识别关键字 transparent。...交互式 HTML 元素的字体不生效给整个文档设置字体的时候，字体并不会应用于诸如 input， button select 和 textarea 这些元素上。...为 input 添加正确的 type 为 input 使用正确的 type。这将改善移动端的用户体验，并使用户更容易访问。

2.1K1 0

使用CSS提高网站性能的30种方法

11.使用现代CSS布局较早的布局技术，如浮动和，我敢说，HTML是笨重的，难以管理，并需要大量的代码来管理间距和媒体查询。...非常旧的浏览器不支持这些属性，它们将每个元素显示为一个标准块。这导致了一个更简单、更快的类似移动设备的线性布局，而且几乎没有理由添加后备。...24.创建针对设备的样式表包含所有设备代码的单个（构建）样式表对于大多数站点都是实用的。然而，如果你的代码库很大，或者移动的和桌面设计有很大的不同，你可以创建特定于设备的样式表，例如。 <!...默认样式创建更简单、线性、类似移动设备的布局。当空间允许时，媒体查询和固有的网格布局可以应用更复杂的桌面设计。在移动的和桌面浏览器中彻底测试您的样式。...至少，使用以下内容：桌面：Firefox、Chrome（Chrome、Edge、Brave、Opera或Vivaldi）和Safari浏览器移动的：Android上的Chrome和iOS上的Safari

3.4K2 0

将 SVG 与媒体查询结合使用

JPEG、WebP、GIF 和 PNG 都是光栅图像格式的示例。光栅图像与分辨率有关。144 PPI（每英寸像素）PNG 图像在具有 144 PPI 显示分辨率的设备上看起来很棒。...因此，矢量图像与分辨率无关，无论显示分辨率或显示尺寸如何，都可以保持其质量。分辨率独立是SVG的最大优势。我们可以在不损失质量的情况下放大或缩小图像。...SVG 和 HTML 之间的差异虽然 SVG 和 HTML 都是标记语言，但它们之间有两个显着差异会影响它们如何使用 CSS： SVG 不遵循 CSS 盒模型 SVG 缺乏定位方案 SVG 不遵循 CSS...换句话说，您可以定义将元素绘制到 SVG 画布的位置，但您不能在 CSS 词的意义上“定位”它们。与定位方案相关，SVG 也缺乏z-index上下文的概念和堆叠。...但是当我们将animate类添加到我们的圆圈中时，我们将划线长度移动到500并消除间隙。效果有点像用圆规画一个圆。为什么是500？这是创造这种特殊效果的最小值。

6.2K0 0

从 Web 图标演进历史看最佳实践

：基于轮廓字体格式的字体图标是通过贝塞尔曲线描述的，可以任意伸缩并且保持显示效果不失真，这在移动端尤为重要。...3 左右的尺寸，实际上只能算是一种取舍和妥协。...4.1 内联 SVG SVG 的真正强大之处在于，当将其内联入 HTML 内容，那么它的文档模型将可以被该页面的 JS/CSS 访问和操作。...SVG Sprite 由于 SVG 支持一个元素，可以从内联的 SVG 中选取特定内容出来作为独立的 SVG 进行显示，所以人们受 CSS sprite 的启发，也设计了一个 SVG sprite...上文 GitHub 后端 helper 的方案对应当前前端的技术方案，实际上就是基于内联 SVG 的图标组件。

1.7K1 0

SVG图形绘制入门第一弹

在SEO,无障碍方面，SVG文件中的文字虽然在显示时可呈现出各种图像化的修饰效果，但却仍然是以文本的形式存在的，这些信息可以为搜索引擎所用，而以往搜索引擎通常无法搜索到写在点阵图像中的文字。...SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。在优化方面，SVG文件比那些GIF和JPEG，PNG格式的文件要小很多，因而下载也更快。...然后我们看一下浏览器支持的情况： Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。...)"> (这里简单提一下style里的 fill 和 stroke,填充和描边的样式属性，对于一个前端来说样式一看就懂，不必再多介绍，你可以像我这样用内联样式，也可以写个class调用。)...x 和 y 坐标，理论上不应该少于三个坐标点，他会在绘制完最后一个点的时候，自动闭合路径，回到第一个点。

3.1K7 0

年薪30万的前端面试题，你能答对几道？|附答案

直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！ html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。...搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 5.HTML5 为什么只需要写 !DOCTYPE HTML？...绘画 canvas 用于媒介回放的 video 和 audio 元素本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除...(优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。...向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取

5.6K6 0

聊一聊“@font-face”

2、Safari 的一小步，浏览器的一大步大约十年后，在2008年，Safari 3.1 重新支持了 @font-face , 并且可以使用最普遍的字体格式 ttf 以及 otf。...truetype(.ttf) 是目前最普遍的字体格式，早在八十年代就被苹果开发出来，当时它作为一种可伸缩的字体格式用来代替位图字体在屏幕上显示，不久微软也接受了这个格式，由于该格式可以针对特定大小做精准的微调...既然 opentype 有这么多优点，那为什么我们上面的代码中没用使用 opentype 呢？首先，微软建议如果只需要在屏幕上显示文字推荐用 truetype 格式。...最早在 firefox 3.6 上实现。事实上，woff 并不是一种新的字体格式，它只是包装 truetype 和 opentype 并进行压缩，压缩后可以使 truetype 减少 40% 。...IE9 之前的版本没有按照标准解析字体声明，当 src 属性包含多个 url 时，它无法正确的解析而返回 404 错误，而其他浏览器会自动采用自己适用的 url。

1.4K5 0

Axure RP 9 for Mac(原型设计软件)

SVG 样式 “聚焦”样式效果复制和粘贴样式（替换格式画家）将边框设置为任何厚度图片颜色调整为色调，饱和度，亮度，对比度更好的压缩翻转水平/垂直大师主视图（替换母版上的自适应视图）覆盖母版中的文本覆盖母版中的图像...动态面板 axure rp 9 mac内联编辑边框角半径外阴影自适应视图 axure rp 9 mac页面可以有不同的自适应视图页面可以共享自适应视图集原型显示最适合的视图（替换条件）图书馆将图像文件夹添加到...（1,1.1,1.1.1）注意数字显示在原型中注意数字是连续的动态面板主要注释是生成原型的表单小部件自定义样式样式效果（鼠标悬停，禁用等）互动内联交互构建器在交互构建器中搜索启用/禁用时的条件显示...展示全貌使用新的原型播放器以最佳的方式展示您的作品，优化现代浏览器并为现代工作流程设计。清晰呈现具有丰富交互功能的移动和桌面原型以及针对您的业务解决方案的全面文档。...在移动设备上，使用适用于iOS和Android的浏览器或Axure Share App。 DIAGRAMMING +文档创建流程图，线框，模型，用户旅程，角色，创意板等。

1.6K2 0

移动端Web开发调试之Weinre调试教程

Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具，借助于网络，可以在PC上直接调试运行在移动设备上的远程页面，中文意思是远程Web...检查器，有了Weinre，在PC上可以即时修改目标网页的HTML/CSS/JavaScript，调试过程可实时显示移动设备上页面的预览效果，并同步显示设备页面的错误和警告信息，可以查看网络资源的信息，不过...我在Chrome 38/39版本测试时打开Debug客户端出现页面白板，原因未知，了解原因的欢迎留言给我。换为Safari浏览器打开则正常。...如果桌面电脑用USB数据线连接了移动设备，但Debug客户端依然显示为weinre:targetnot connected，如下图所示： ?...检查Debug客户端桌面环境是否和移动设备处于同一个局域网网段，尤其是WiFi方式上网的情况，一定要防止Wifi自动连接到其他网络中。

2.2K2 0

在 HTML 中包含资源的新思路

只要我一直工作在 Web 上，就需要一种简单的 HTML 驱动方式，将另一个文件的内容直接包含在页面中。...例如，我经常希望向页面添加额外的 HTML，或者嵌入 SVG 文件的内容，以便我们可以为其设置动画和样式。...一个短小的演示：包含 SVG 下面是一个内联（嵌入式）SVG 图形。它是从外部文件 signal.svg中加载的。...这是对 HTML 和 SVG 包含进行的规范化检查。...它适用于各种浏览器：到目前为止，在我的简短测试中，它适用于 Chrome，Firefox，Safari 和 Edge。

3.1K3 0

怎么用css属性屏蔽鼠标事件(鼠标点击可穿透上层元素)

起源：前几天测试发来一个需求，内容要求看图：看到这个需求，我有点懵逼。现在的情况是只有点击日期内容框空白区域时，才会响应点击事件显示下拉日期菜单。...而这个icon图标我是绝对定位到日期内容框中的，它的图层维度是高于日期内容框的，点击icon图标时是不会响应点击事件的。我的第一个反应是事件点击穿透，但是该怎么实现？...poniter-events属性的值很多，但大部分和svg有关直接跳过，通用的属性值有两个none | auto。 auto：与 pointer-events 属性未指定时的表现效果相同。...再关注下poniter-events的兼容情况：桌面浏览器 IE：11+（IE6~IE10均不支持） Firefox：3.6＋ Chrome：4.0+ Safari：6.0 Opera：15.0...移动设备浏览器 iOS Safari：6.0 Android Browser：2.1+ Android Chrome：18.0+ 看到这里，基本上就能解决我这次所遇到的问题了：解决完问题

1.7K2 0

前端兼容性

opeck渲染引擎 Opera # 屏幕分辨率兼容性典型的桌面屏幕分辨率：1920x1080 典型的便携屏幕分辨率：1366x768 典型的平板屏幕分辨率：1920x1200 典型的移动屏幕分辨率...大部分人的手机分辨率都是1080x1920，在分类中却被归为了360x640，这个分辨率和CSS中的PX是一致的。...桌面屏幕分辨率说明移动设备一开始就考虑了DPR，而Windwos桌面的分辨率由于历史原因却没有这一概念，于是Windwos引入了DPI，最初是设置DPI，后来是设置DPI比例。...没有这些框架对于Web网站来说不造成大的体验下降。而如果需要开发混合移动、桌面应用，则需要认真考虑这些框架，毕竟用户对本地应用的体验期待要高很多。...# 常见兼容性问题常见的主要是浏览器的兼容性问题，因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

1.9K2 0

【前端动画】实现动画的6种方式

引言动画基本上分类两类：补间动画和帧动画。补间动画：补齐中间的动画。由浏览器帮助补齐中间的状态，开发者只需要定义开始和结束的状态。...存在的问题 javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。...但是transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。注意在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。...CSS3 animation animation 算是真正意义上的CSS3动画。通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。...大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过这个频率用户体验也不会提升。因此，最平滑动画的最佳循环间隔是 1000ms/60 ，约16ms。

4661 0

这 5 个 VSCode 扩展提高你的开发效率

SVG Preview VS Code 具有一个内置的图像预览窗口，但是当你单击.svg文件时，它仅显示代码。...3. i18n Ally 几个月前，我开始使用i18n，不得不说它使我的网络应用本地化为多种语言变得异常容易。唯一的困难是，无法在实际处理的文件中编辑翻译。...i18n Ally还附带了一个漂亮的侧边栏显示（上），它向我们显示完成项目本地化的距离。 4....JavaScript Booster JavaScript Booster ：一个非常棒的重构工具，比如将var替换为const或let，移除无用的else语句，将变量声明和变量初始化合并。...应该说很大程度上受到 Webstorm 的启发。 ? 还有一个额外必要扩展！ VS Code Icons 当前有超过四百万的用户，你可能已经在使用此功能，这就是为什么它在此列表中具有很高的优势。

1.5K4 0

Apache Zeppelin 中 Python 2＆3解释器

例如， z.configure_mpl(width=400, height=300, fmt='svg') plt.plot([1, 2, 3]) 将产生一个SVG格式的400x300图像，默认情况下通常为...在将来，angular可以使用另一个可选的选项来使从一个段落直接从另一段生成的图形更新（输出将%angular代替%html）。但是，该功能在解释器中已经pyspark可用。...plt) plt.close() 该z.show()功能可以使用可选参数来调整图形尺寸（宽度和高度）以及输出格式（png或可选的svg）。...Pandas整合 Apache Zeppelin 桌面显示系统提供内置的数据可视化功能。...例： import pandas as pd rates = pd.read_csv("bank.csv", sep=";") z.show(rates) 在Pandas DataFrames上的

2.7K7 0

HTML 面试知识点总结

，会使一些编写不标准的网页无法正确显示。...（浏览器解析过程）理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们，然而，存在一个问题，JavaScript 脚本执行时可能在文档的解析过程中请求样式信息，如果样式还没有加载和解析...（3）纯 js 实现，判断一个点在不在圆上的简单算法，通过监听文档的点击事件，获取每次点击时鼠标的位置，判断该位置是否在我们规定的圆形区域内。...2.Normalize.css 修复了浏览器的 bug 它修复了常见的桌面端和移动端浏览器的 bug。这往往超出了 Reset 所能做到的范畴。...关于这一点，Normalize.css 修复的问题包含了 HTML5 元素的显示设置、预格式化文字的 font-size 问题、在 IE9 中 SVG 的溢出、许多出现在各浏览器和操作系统中的与表单相关的

1.9K2 0

小图标，大学问

既然我们可以通过控制显示数据，把字母 A 显示为手写体的 A，那么我们是不是也可以把它显示成一个看起来和 A 完全不一样的图标呢？比如……一座房子？当然可以，事实上，这正是字体图标的基本原理。...不过，svg 的特点，让我们还有了一些另外的用法。首先，可以把 svg 内联到 html 中。...svg 和 html 在语法上非常像，都是 xml 语系，只是使用了不同的命名空间（xmlns），因此我们可以把 svg 作为一个元素内联到 html 中，现代浏览器可以正确地解释它们。...我所知道的最早使用合字的图标体系是 Google 的 Material Design，比如用 home就可以显示出一座房子，它是怎么工作的呢？...前面的大多数方案都难以给出完美的答案，只有内联 svg 方式是一个相对理想的方案。

1.3K1 0

2020前端性能优化清单（五）

但是我们还不能完全信任它[38]，尤其是在 Safari 和 Edge 中。...事实上，你可以将高分辨率图像的请求重写为低分辨率图像[56]，删除 web 字体，添加视差效果，预览缩略图和无限滚动，关闭视频自动播放、服务器推送，减少显示项的数量，降低图像质量，甚至改变传输标记[57...Tim Vereecke 发表了一篇非常详细的关于数据保存策略[58]的文章。目前只有 Chrome、Android 版 Chrome 或安装了 Data Saver 扩展的桌面设备上支持。...对于图像或视频，我们都可以使用 SVG 占位符[121]来保留媒体将出现在其中的显示框。这意味着当您需要保持它的长宽比时，该区域将被适当地保留。...为了计算布局的移位分数，浏览器查看两个渲染帧之间的视口大小和视口中不稳定元素的移动。理想情况下，比分应该接近 0。

2K2 0

62款前端数据可视化插件大盘点

Flash / SVG库——导致轻量级的,美丽的和响应指示板。...IE 6+ resume：CanvasXpress是一个独立的Javascript编写的图形库，支持所有主流浏览器中计算机和移动设备。...它完全实现在JavaScript中,不依赖于任何其他库,并使用SVG VML或画布上 ?...所以图形在网页上显示要靠Java程序，使用canvas技术 ?...6+，ios和andriod设备 resume：使用内嵌在HTML中的数据或通过javascript直接生成微线图(小内联图表)，最主要的特点是可以生成波形图。

24.6K10 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭