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. MVC跨项目路由

    我们在实际应用开发中,经常遇到多人共同开发维护同一个项目情况,所以不免会出现其中一个人代码出现bug质量问题导致整个项目就原地“爆炸”的惨状.在之前公司经常遇到某个人忘记更新(我就做个此事[" ...

  2. html中role的作用

    role 是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明. 通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性. role的作用是描 ...

  3. JS高程5.引用类型（4）Array类型的各类方法

    一.转换方法 所有的对象都具有toLocaleString(),toString()和valueOf()方法.调用toString()方法会返回由数组中的每个值的字符串拼接而成的一个以逗号分隔的字符串 ...

  4. 浅谈时钟的生成(js手写代码)

    在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况 ...

  5. java script第一篇（按钮全选的实现）

    今天刚学了java script,记录下学习新知识的点滴.以下是操作步骤.鉴于我是初级者,如有错误,恳请读者指正.万分谢谢. 1.新建一个文档(用NotePad软件,为了使得在浏览器中打开不是乱码,在 ...

  6. 学习笔记 HTTP参数污染注入

    HTTP参数污染注入源于网站对于提交的相同的参数的不同处理方式导致. 例如: www.XX.com/a?key=ab&key=3 如果服务端返回输入key的值,可能会有 一: ab 二:3 三 ...

  7. iOS 开发 -----公司测试打包上传流程

    打包iOS应用程序 如果想要将做的iOS应用程序安装到自己的iOS设备上测试.或者安装到别人的iOS设备上,或者想发布到App Store中,先要给应用签名.签名就要有证书,这就需要申请证书的过程了. ...

  8. 沙盒SandBox

    每个App都有自己的沙盒,也就是一个存储空间.App之间没有权限访问对方的沙盒资源.沙盒的目录下有三个文件夹:Documents.Library.temp 目录结构 Documents:用于存储用户数 ...

  9. 关于多个block问题

    在某个添加文本的页面中,leftbarbutton是删除(直接将数组中的这个string删除),rightbarbutton是完成,分别对应两个block,完成的block是一开始写的,写到了view ...

  10. 如何安装Genymotion虚拟机以及Genmotion的eclipse插件

    ---内容开始--- - 首先去genymotion的官网去下载其安装文件 资源下载 Genymotion官网必须注册一个账号这个账号安装之后还有用的,用户名最好用网易126邮箱注册----我下载的是 ...