SVG  transform矩阵遇到的兼容性问题。在chrome、safari、火狐、360极速浏览器上都正常显示的图，在手机端就不行啊！！！

先上图。

图1     PC端浏览器

图2   iPhone手机客户端

两者比较是不是感觉手机端的环形比很不正常。感觉手机端就跟后妈养得一样！！！说好的270度旋转效果呢，为啥出不来效果，为啥！

好了，接下去上简易版代码吧。。。就一个圆。

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="utf-8" />

   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

   <title>test3</title>

   <meta name="viewport" content="width=device-width; initial-scale=1.0" />

 </head>

 <body>

   <div class="circle container">

   <svg width="220" height="220" viewbox="0 0 220 220">

     <circle cx="110" cy="110" r="90" stroke-width="4" stroke="#eee" fill="none"></circle>

     <circle id="c1" cx="110" cy="110" r="90" stroke-width="4" stroke="#fb930d" fill="none"  transform="matrix(0,-1,1,0,0,220)" stroke-dasharray="0 1069"></circle>

   </svg>

 </div>

 <script>

    var circle = document.querySelector("#c1");

    var percent =0.5, perimeter = Math.PI * 2 * 90;

    circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));

   </script>

 </body>

 </html>

做过很多尝试，然而现在问题还木有解决。待补充。

SVG中 transform矩阵遇到的兼容性问题的更多相关文章

  1. Snap.svg中transform旋转值的“r+数组”表现形式

    Snap.svg中transform的值还可以写为类似以下这种形式: transform:'r'+[100,[50,50]]; 这种写法的意思是,让元素以(50,50)为旋转中心点,然后旋转100度. ...

  2. 第98天：CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  3. CSS3中的矩阵

    CSS3中的矩阵 CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3,如下面矩阵示 ...

  4. [翻译svg教程]svg 中的g元素

    svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...

  5. 在 SVG 中添加交互性

    原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgint/ SVG 中的交互性可以分为三个领域 -- 链接.事件和脚本.本文将依次讨论这三个领域. ...

  6. CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...

  7. SVG的Transform使用

    SVG的Transform使用: <%@ page language="java" contentType="text/html; charset=UTF-8&qu ...

  8. SVG 学习<六> SVG的transform

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  9. 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...

随机推荐

  1. jvm内存区域

    概述 jvm内存分为几个区域: 程序计数器 虚拟机栈 本地方法栈 堆 方法区 运行时常量池 直接内存 这些内存区域是在java进程中细分的,为java程序提供服务 不同的区域存储的内容不一样,生命周期 ...

  2. DevOps

    DevOps DevOps(英文Development和Operations的组合)是一组过程.方法与系统的统称,用于促进开发(应用程序/软件工程).技术运营和质量保障(QA)部门之间的沟通.协作与整 ...

  3. LinuxMint装JDK和Eclipse

    Linux Mint 装JDK和Eclipse 前言 在尝试了好几个发行版后终于锁定了Linux Mint Cinnamon .那么就得配置好环境了. 这里讲一下JAVA环境,配置JDK和Eclips ...

  4. 做一个 App 前需要考虑的几件事

    做一个 App 前需要考虑的几件事  来源:limboy的博客   随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 ...

  5. nginx端口占用案例分享

    这里分享一个案例,问题的原因是反向代理使用不当. 现象 首先描述一下问题的现象.当时的问题是应用启动失败,日志里面报错显示端口占用.我们的应用都是通过脚本发布的,之前发布过多次都没有出现过问题.那么同 ...

  6. 使用 python 管理 mysql 开发工具箱 - 1

    Mysql 是一个比较优秀的开源的数据库,很多公司都在使用.作为运维人员,经常做着一些重复性的工作,比如创建数据库实例,数据库备份等,完全都可以使用 python 编写一个工具来实现. 一.模块 Co ...

  7. linux下安装 oracle 11g

    oracle 11g安装 一.环境准备 划分区 / 15000M /tmp 4096M /boot 100M Swap 4096M /u01 剩余空间 2.更改主机名,ip地址 3.安装软件包 那么l ...

  8. shell编程：定义简单标准命令集

    shell是用户操作接口的意思,操作系统运行起来后都会给用户提供一个操作界面,这个界面就叫shell,用户可以通过shell来调用操作系统内部的复杂实现,而shell编程就是在shell层次上进行编程 ...

  9. [KMP]【学习笔记】

    Oulipo Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 36916   Accepted: 14904 Descript ...

  10. BZOJ 2705: [SDOI2012]Longge的问题 [欧拉函数]

    2705: [SDOI2012]Longge的问题 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 2553  Solved: 1565[Submit][ ...