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

SVG transform="rotate(180)“在Safari11中不起作用

SVG transform="rotate(180)"在Safari11中不起作用是因为Safari11对于SVG的transform属性的实现存在一些兼容性问题。在Safari11中,当使用transform属性进行旋转时,可能会出现旋转不生效的情况。

解决这个问题的方法是使用CSS的transform属性来代替SVG的transform属性。可以通过在SVG元素的样式中添加transform属性来实现旋转效果。例如,可以使用以下CSS样式来实现旋转180度的效果:

代码语言:css
复制
.rotate {
  transform: rotate(180deg);
}

然后,在SVG元素中添加class="rotate"来应用这个样式:

代码语言:html
复制
<svg>
  <rect class="rotate" width="100" height="100" />
</svg>

这样就可以在Safari11中实现旋转180度的效果了。

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

  • 腾讯云SVG文档:腾讯云提供了详细的SVG文档,包含了SVG的基本概念、用法和示例等内容,可以帮助开发者更好地理解和使用SVG。
  • 腾讯云云服务器:腾讯云云服务器是一种灵活可扩展的云计算服务,提供了高性能、高可靠性的虚拟服务器,适用于各种应用场景,包括前端开发、后端开发、数据库、服务器运维等。
  • 腾讯云对象存储:腾讯云对象存储是一种安全、稳定、高可用的云存储服务,适用于存储和管理各种类型的数据,包括音视频、多媒体文件等。
  • 腾讯云人工智能:腾讯云人工智能提供了丰富的人工智能服务和工具,包括语音识别、图像识别、自然语言处理等,可以帮助开发者快速构建智能化的应用。
  • 腾讯云物联网:腾讯云物联网提供了全面的物联网解决方案,包括设备接入、数据存储、数据分析等功能,可以帮助开发者实现物联网应用的快速开发和部署。
  • 腾讯云区块链:腾讯云区块链是一种安全、高效的区块链服务,提供了区块链网络搭建、智能合约开发等功能,适用于各种区块链应用场景。
  • 腾讯云元宇宙:腾讯云元宇宙是一种虚拟现实技术,可以创建和展示虚拟世界,适用于游戏、娱乐、教育等领域。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

纯 CSS 实现波浪效果!

(-50%, -2%) rotateZ(180deg); } 100% { transform: translate(-50%, 0%) rotateZ(360deg);...: 20; } } @keyframes rotate { 50% { transform: translate(-50%, -73%) rotate(180deg);...} 100% { transform: translate(-50%, -70%) rotate(360deg); } } 效果图: CodePen Demo -- Pure...一些小技巧 单纯的让一个 border-radius 接近 50 的椭圆形旋转,动画效果可能不是那么好,我们可以适当的添加一些其他变换因素,让动画效果看上去更真实: 动画过程,动态的改变 border-radius... 的值; 动画过程,利用 transform 对旋转椭圆进行轻微的位移、变形; 上面也演示到了,多个椭圆同时转动,赋予不同时长的动画,并且添加轻微的透明度,让整个效果更佳逼真。

3K40

「css基础」Transforms 属性实际项目中如何应用?

开篇 关于Transform变形属性大家都不陌生吧,可以通过此属性实现元素的位移translate(x,y),缩放scale(x,y),2d旋转rotate(angle),3d旋转rotate3d(angle...接下来我们要完成一个常见的需求,比如我们通过API请求后台数据,上传图片等不能立返回结果,我们需要让用户页面停留片刻,为了给用户良好的用户体验,我们一般都会有个正在加载的动画进行提示,这个例子笔者将带着大家完成下面一个弹跳的小球...(-50px) rotate(360deg) scale(0.8,0.8); opacity: 0.8; } } 04 转动的线圈(SVG) 这个例子,我们要实现一个更炫的加载提示器...,这次我们要做的是基于SVG的动画效果,要理解这部分内容,你需要会svg相关的基础知识,具体的效果如下,感觉就像”头部“的那个东西牵动线条转圈圈,是不是很酷: ?...,完整的css代码如下: .spinner { margin: 10px; animation: rotate 2s linear infinite; width: 180px;

3.2K30

前端-纯CSS实现波浪效果!

(-50%, -2%) rotateZ(180deg);    }    100% {        transform: translate(-50%, 0%) rotateZ(360deg);...: 20;    } } @keyframes rotate {    50% {        transform: translate(-50%, -73%) rotate(180deg);...   } 100% {        transform: translate(-50%, -70%) rotate(360deg);    } } 效果图: ?...一些小技巧 单纯的让一个 border-radius 接近 50 的椭圆形旋转,动画效果可能不是那么好,我们可以适当的添加一些其他变换因素,让动画效果看上去更真实: 动画过程,动态的改变 border-radius...的值; 动画过程,利用 transform 对旋转椭圆进行轻微的位移、变形; 上面也演示到了,多个椭圆同时转动,赋予不同时长的动画,并且添加轻微的透明度,让整个效果更佳逼真。

1.9K30

「css基础」Transforms 属性实际项目中如何应用?

本篇文章笔者将带着大家完成以下几个例子: 内容垂直居中 对话框气泡 弹跳的小球 转动的线圈(SVG) 翻转的卡片 本篇文章预计15分钟 内容垂直居中 在前端开发过程,内容居中是常见的需求。...,比如我们通过API请求后台数据,上传图片等不能立返回结果,我们需要让用户页面停留片刻,为了给用户良好的用户体验,我们一般都会有个正在加载的动画进行提示,这个例子笔者将带着大家完成下面一个弹跳的小球...) rotate(360deg) scale(0.8,0.8); opacity: 0.8; } } 转动的线圈(SVG) 这个例子,我们要实现一个更炫的加载提示器,这次我们要做的是基于SVG...margin: 10px; animation: rotate 2s linear infinite; width: 180px; height: 180px; } .spinner-dot...backface-visibility: hidden; } 然后定义back相关的样式,先让背面翻转过去,y轴上旋转180度。

2.5K00

三种图表技术SVG、Canvas、WebGL 3D比较

1.什么是SVG? 描述: 一种使用XML描述的2D图形的语言 SVG基于XML意味着,SVG DOM的每个元素都是可用的,可以为某个元素附加Javascript事件处理器。... SVG ,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。 2.什么是canvas? 描述: 通过Javascript来绘制2D图形。...理解适用场景: 从以下这张微软开发社区公布的性能图中也可以看出,SVG绘图面积较大,数据量较小的时候性能较好,渲染时间较短,而Canvas刚好相反。 ?...5.总结 Canvas和SVG两者的适用场景不同,开发者使用是应根据具体的项目需求来选择相应的渲染方式。 最后附上一个SVG编译器帮大家更好的理解和使用SVG

3.4K30

巧用 CSS3 filter(滤镜) 属性

阴影是合成图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受(CSS3背景定义)类型的值,除了 “inset” 关键字是不允许的。...Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer), 会应用colorcolor属性的值。...值0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。 hue-rotate(deg) 给图像应用色相旋转。”angle”一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。...{-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);} .invert {-webkit-filter: invert(100%...: translateY(-2px) scaleY(-1); /* 对模拟倒影的元素应用svg filter url对应的是上面svg filter的id */ filter:

1.3K10
领券