首页 文章

仅SVG圈子笔画，IE和Firefox上的图形工件（Windows）

提问于
浏览 次
1

我在尝试删除动画饼图上相当难看的神器时遇到问题 . 它在chrome上工作得很好，只有（11或边缘）和Firefox似乎有问题 .

让我们从截屏开始，您将立即看到问题：

Ugly firefox version :

enter image description here

Perfect Chrome version :

enter image description here

正如您所看到的，Firefox上存在一个非常奇怪的图形错误 . 我无法理解为什么渲染引擎会这样做 .

编辑：请注意它与笔画宽度/ svg元素尺寸有某种关系

让我解释一下这里发生的事情：

<figure id="pie" data-percentage="20" data-behavior="pie-chart">
  <svg>
    <!-- Radius has to be svg diameter divided by 4 -->
    <!-- Cx and cy have to be svg diameter divided by 2 -->
    <circle r="100" cx="100" cy="100"/>
    <circle r="50" cx="100" cy="100"/>
  </svg>
  <div class="receiver"></div>
</figure>

基本上我有一个蓝色圆圈，没有中风 . 在它的顶部，我有另一个蓝色圆圈，但绿色的中风 . 我通过js动画描绘dasharray，以便将馅饼“填充”到给定值，从而获得动画饼图 .

但正如您所看到的，非webkit浏览器存在一个大问题 . 我当然在css中使用几何精度 .

You can see all my code on the codepen

这里只是一个最小的SVG版本 .

svg {
    height: 200px;
    width: 200px;
    transform: rotate(-90deg);
}

circle:nth-child(1) {
    fill: #4d80b3;
    stroke-width: 0;
}

circle:nth-child(2) {
    fill: #4d80b3;
    stroke: #9cc374;
    stroke-dasharray: 0, 314.159;
    stroke-width: 100px;
    transition: stroke-dasharray 2000ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

<svg>
    <circle cy="100" cx="100" r="100"/>
    <circle cy="100" cx="100" r="50" style="stroke-dasharray: 62.8319, 314.159;"/>
</svg>
javascript jquery html css svg

2 回答

  • 1

    我在Windows 7上也看到了43.0.3 .

    你绘制饼图的方式有点像黑客 . 大多数人会把馅饼行业描绘成一条充满道路的人，而不是试图用肥胖的方式去做 .

    话虽如此，它确实看起来像FF中的一个错误 . 你应该report it .

    但是我注意到，如果你将 stroke-width 更改为 99px ，问题就会消失 . 它在Chrome上看起来还不错 .

    svg {
    height: 200px;
    width: 200px;
    transform: rotate(-90deg);
}

circle:nth-child(1) {
    fill: #4d80b3;
    stroke-width: 0;
}

circle:nth-child(2) {
    fill: #4d80b3;
    stroke: #9cc374;
    stroke-dasharray: 0, 314.159;
    stroke-width: 99px;
    transition: stroke-dasharray 2000ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

    <svg>
    <circle cy="100" cx="100" r="100"/>
    <circle cy="100" cx="100" r="50" style="stroke-dasharray: 62.8319, 314.159;"/>
</svg>
    回复于
  • 1

    使用带有 A 的 <path> ，您可以通过以下方式执行此操作：

    <svg xmlns="http://www.w3.org/2000/svg" height="210" width="210" >
<g transform="scale(2) translate(51,51)">
<path style="fill:#4d80b3" d="M 0,-50 A 50,50 0 1 0 47.55,-15.45 L 0,0 z" />
<path style="fill:#9cc374" d="M 0,-50 A 50,50 0 0 1 47.55,-15.45 L 0,0 z" />
</g> </svg>

    值 47.55 和 -15.45 必须通过百分比相关角度乘以半径的 sin / cos 来计算（在这种情况下：20％，半径= 50） .

    回复于

相关问题