首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

SVG使用defs在chrome 46上不起作用

SVG是可缩放矢量图形(Scalable Vector Graphics)的缩写,是一种基于XML的图像格式,用于描述二维图形和图形应用程序。SVG使用defs元素来定义可重用的图形元素,但在Chrome 46版本上可能会出现不起作用的问题。

解决这个问题的方法是使用其他方式来定义可重用的图形元素,例如使用symbol元素或将图形元素直接嵌入到需要使用的地方。以下是对SVG使用defs不起作用的问题的解答:

问题:SVG使用defs在Chrome 46上不起作用。

解答:在Chrome 46版本中,可能会出现SVG使用defs元素不起作用的问题。这可能是由于浏览器的兼容性问题导致的。为了解决这个问题,可以尝试使用其他方式来定义可重用的图形元素,例如使用symbol元素或将图形元素直接嵌入到需要使用的地方。

  • 使用symbol元素:可以将需要重用的图形元素包裹在symbol元素中,并使用id属性给symbol元素命名。然后,在需要使用该图形元素的地方,使用use元素引用该symbol元素,并通过xlink:href属性指定引用的symbol元素的id。这样可以实现图形元素的重用。
  • 将图形元素直接嵌入:可以将需要重用的图形元素直接嵌入到需要使用的地方,而不使用defs元素。这样可以避免使用defs元素可能出现的兼容性问题。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云对象存储(COS):腾讯云对象存储(COS)是一种安全、稳定、高效、低成本的云端存储服务,适用于存储和处理大规模非结构化数据。了解更多信息,请访问:腾讯云对象存储(COS)产品介绍
  • 腾讯云云服务器(CVM):腾讯云云服务器(CVM)是一种弹性、安全、稳定的云端计算服务,提供可扩展的计算能力。了解更多信息,请访问:腾讯云云服务器(CVM)产品介绍

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端-SVG 实现动态模糊动画效果

设置模糊 由于常规CSS模糊滤镜不支持定向模糊,所以我们不得不使用SVG滤镜。 《Creative Gooey Effects》这篇文章中介绍有SVG滤镜的基础知识。...svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters">   defs>     SVG元素不兼容,所以我们需要使用本机JS函数选择元素: var filters = document.querySelector(".filters"), // the SVG that...contains the filters defs = filters.querySelector("defs"), // the  element inside the SVG blur = defs.querySelector...对于更复杂的拍摄,你可以考虑将动态模糊效果应用于多个对象,在没有动画时禁用模糊和速度计算,等等。 到这里本教程就结束了! 再说一次,请注意,这种效果可能很耗费资源,所以你应该避免在大型对象上使用它。

2.5K31
  • 位图和SVG用法比较

    位图使用方法 位图在Web项目中的应用已经非常成熟了,如果需要常规的图片展示,我们通常不会使用多个图片,而是把需要的图片放置在一张图片中,例如: ?...而且在交互性上要优于位图图片;你可以使用图片名称来引用SVG对象,相比于通过手动计算像素位置通过CSS样式定位图片,显然方便了很多。...在使用之前,我们先创建一个很简单的SVG,包含三个独立图标:一个绿色的圆形、一个红色的方形和一个蓝色的三角形。 <?xml version="1.0"?...有一个小技巧-你可以通过CSS样式来控制只显示当前目标图层,隐藏其它图层: defs> SVG文件,如Object、iframe、img标签或者是作为CSS背景添加(Chrome、Safari和Opera 15+都不支持以img标签或者CSS背景添加形式添加SVG

    3K60

    评价打分组件,SVG 半颗星的解决方案!

    实现 在实现之前,我们需要有一个基础 SVG 结构,如下所示: svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewBox...如何重用SVG 我们可以把上面的SVG 标签复制五次,或者提取path数据并保存在某个地方,然后在不重复代码的情况下重新使用它。我们选择后者。...第一个是使用,第二个是使用SVG 渐变。 使用 使用 masks 的目的是模拟擦除星星的一部分并将另一部分涂成半透明颜色的效果。 在上图中,有一个正方形和一个星星。...好吧,多亏了 SVG,我们可以在 中包含多个元素。...这个解决方案的绝妙之处在于,我们不需要提供两种色调, mask 会起作用的: 事例地址:https://codepen.io/shadeed/pe...

    70210

    将 SVG 与媒体查询结合使用

    通过将 CSS 与 SVG 结合使用,我们可以根据用户交互更改 SVG 的外观。或者我们可以在多个地方使用同一个 SVG 文档,并根据视口的宽度显示或隐藏它的一部分。...这是在 HTML 中使用 CSS 和在 SVG 中使用 CSS 的一个区别:属性名称。我们在 HTML 文档中使用的许多 CSS 属性与 SVG 不兼容,反之亦然。我们将在本章后面回到这一点。...网格布局、浮动和 Flexbox 也不起作用。 但是,您可以使用 CSS 来设置或更改一系列 SVG 属性和属性值。SVG 2规范中概述了完整列表,尽管大多数浏览器的支持尚不完整。...单位对于 SVG 属性是可选的。另一方面,CSS 值需要单位。长度和百分比对于此处提到的属性都有效,但请注意,长度在 SVG 文档中的作用略有不同。请记住,SVG 中的 S 代表可扩展。...比如Chrome和Edge支持使用CSSpath()函数设置路径数据,或者d属性: path { d: path("M 454.45223,559.21474 -304.96705,163.45948

    6.2K00

    一篇文章带你了解SVG 阴影

    注意: Internet Explorer和Safari不支持SVG滤镜! 一、前言 defs 和 filte元素 所有互联网的SVG滤镜定义在defs>元素中。...defs>元素定义短并含有特殊元素(如滤镜)定义标签用来定义SVG滤镜。 标签使用必需的id属性来定义向图形应用哪个滤镜? 二、feOffset 元素 1.... svg xmlns="http://www.w3.org/2000/svg" version="1.1"> defs> <filter id="f1" x="0" y="0" width...代码解析: 元素的属性改为"SourceAlpha"在Alpha通道使用残影,而不是整个RGBA像素。 ---- 4. 实例 4 现在为阴影涂上一层颜色。...三、总结 本文基于Htm基础,主要介绍了通过SVG进行图像,阴影效果的呈现,feOffset元素在实际应用中对图像的阴影添加不一样的样式 ,呈现不一样的阴影层次。

    90710

    一篇文章带你了解SVG 剪切路径

    注 在剪切路径内只有圆的部分是可见的。其余部分将被剪切。 二、高级剪切路径 可以使用矩形以外的其他形状作为剪切路径。可以使用圆形,椭圆形,多边形或自定义路径。任何SVG形状都可以用作剪切路径。...这是将元素用作剪切路径的示SVG代码,因为这些是可以使用的最高级的剪切路径类型。剪辑路径将应用于元素。...> 运行效果: 这是生成的图像-在右侧。...在组上剪裁路径 可以在一组SVG形状上使用剪切路径,而不是分别在每个形状上使用。只需将形状放在元素内,然后在元素上设置CSS属性clip-path即可。...还介绍了高级的剪切路径(在组上剪裁路径、文本作为剪切路径)通过项目的分析,案例的效果图的展示,能够让读者更好的理解SVG路径剪切的用法。

    2.5K10

    【Web技术】610- Web上的图片技巧

    它可以是一个HTML ,或者是通过CSS背景生成的图片,也可能是SVG 。选择正确的技术很重要,对网站的性能和可访问性起着巨大的作用。...SVG SVG被认为是一种图像,它最大的功能是在不影响质量的前提下进行缩放。此外,在SVG中,我们可以嵌入JPG、PNG或SVG图像。请看下面的HTML。...在悬停时,形状和文字需要改变颜色。如何做到这一点呢?对我来说,最好的解决方案是使用内嵌式SVG。...svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg"> defs> 使用HTML 与 的使用方法 现在的问题是,要添加一个内边框,我们不能使用内嵌框阴影,因为它在图片上不起作用。解决的办法是将头像包裹在 中,并为内边框添加一个专用元素。

    3K30

    SVG 动画精髓(下)

    在 SVG 中,最长用到的线条标签就是 Path。这里我前面一篇文章已经做了介绍,我这里就不赘述了。 而在具体变化当中用到的是关于stroke的相关属性:(下面的属性都可以直接用在 CSS 当中!)...SVG 文字 在 SVG 中定义文字直接使用text 标签即可。关于文字来说,一般而言需要注意的点就那么即可,文字的排列,间距等等。这些都可以直接使用 CSS 进行控制。...,作用是可以复用 g 分组的样式。...而且,有时候,我们只是想使用一些模板,即,图形并未被解析,只有代码存在。这时候,就需要使用defs 来包裹了。 defs 用来保存一些代码,使其不会被浏览器解析。...那它不和 defs 差不多吗? 恩,确实。不过,defs 是官方推荐,用来包裹一些模板 svg 代码而创造出来,用来增加可读性的标签。而 symbol 是存粹的作为一个模板。

    1.8K00

    前端运用图片的技巧总结

    它可以是一个HTML ,或者是通过CSS背景生成的图片,也可能是SVG 。选择正确的技术很重要,对网站的性能和可访问性起着巨大的作用。...在检查该元素时,要先检查该元素,然后在DevTools中打开URL里面的链接,才可以下载一个正在添加CSS的图片。 伪元素 可以使用伪元素与CSS背景图片一起使用,例如,在图片的顶部显示一个叠加元素。...SVG SVG被认为是一种图像,它最大的功能是在不影响质量的前提下进行缩放。此外,在SVG中,我们可以嵌入JPG、PNG或SVG图像。请看下面的HTML。...在悬停时,形状和文字需要改变颜色。如何做到这一点呢?对我来说,最好的解决方案是使用内嵌式SVG。...使用HTML 与 的使用方法 现在的问题是,要添加一个内边框,我们不能使用内嵌框阴影,因为它在图片上不起作用。解决的办法是将头像包裹在 中,并为内边框添加一个专用元素。

    2.6K20

    高清ICON SVG解决方案(下) - 腾讯ISUX

    从上一篇文章中我们得知SVG 做的图标在IE9+的浏览器渲染效果相当的差,所以在IE下我们我们不使用SVG ICON,我们可以将SVG转成一倍的png图片来进行替代。...、gulp-svg-sprites 第五种SVG Defs/Symbols 这种其实就是在SVG Sprites上面更进一步的使用了,SVG Sprites是需要我们去通过坐标获取对应位置图标的,但是...SVG Defs/Symbols就更简单了,直接通过给每个SVG ICON定义ID,直接调用对应ID即可: 1 2 3 4 5 6 7 8 svg xmlns="http://www.w3.org/2000...兼容性方面在Safari6.1开始和Chrome21就开始支持这个属性了。...---- 总结 SVG目前还是存在许多问题,Windows下使用IE的兼容性和渲染效果都太差,在PC侧我们无法全量使用,所以我们可以用上面的这套解决方案解决PC下所有浏览器下兼容问题,在Retina

    1.2K10
    领券