SVG Circle文件在Windows上从顶部沿逆时针方向笔触 [英] SVG Circle file stroke from top in anti clockwise direction on windows

问题描述

我用带有填充笔触颜色的圆圈创建了SVG图像.我无法沿逆时针方向从顶部填充颜色.如何使用内嵌CSS沿逆时针方向填充(需要使用内嵌CSS来完成).我尝试了小提琴，添加后可以使用:

I created SVG Image with circles with filling stroke color. I am unable to fill color from the top position in an anti-clockwise direction. How to fill in an anti-clockwise direction with inline CSS (need to do using inline CSS). I tried in fiddle and it works after adding:

transform="rotate(-90deg)"

它适用于Linux浏览器，但不适用于Windows Chrome.

It works for Linux browsers but not working with Windows Chrome.

<svg width="100" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="60" cy="60" r="24" fill="none" stroke="#e6e6e6" stroke-width="12" />
    <circle cx="60" cy="60" r="12" fill="none" stroke="red" stroke-width="26" stroke-width="12" stroke-dasharray="65" stroke-dashoffset="0" transform-origin="center"/>
</svg>

如何使用嵌入式CSS在Windows Chrome浏览器中从SVG圆的顶部位置(从12点开始)填充颜色?

How to fill color from the top position of SVG circle (from 12 o'clock point) in Windows Chrome browsers using inline CSS?

SVG代码:

<svg width="100" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
    <circle cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" stroke-dasharray="339.292" stroke-dashoffset="200" transform="rotate(-90)" transform-origin="center" />
</svg>

推荐答案

圆上的虚线笔划的起始位置是3点钟的位置，并且沿顺时针方向进行.正如您所发现的.

The start position for dashed strokes on a circle is the 3 o'clock position, and proceeds clockwise. As you have discovered.

要从12点钟位置开始，只需旋转-90度即可.您已经解决了.

To start from the 12 o'clock position, just rotate by -90 degrees. You already worked that out.

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
		<circle cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12"
            stroke-dasharray="339.292" stroke-dashoffset="200" transform ="rotate(-90, 60,60)"/>
</svg>

要使破折号沿逆时针方向前进，您可以:

To have the dash proceed in an anti-clockwise direction, you could either:

1. 水平翻转圆圈，或
2. 否定stroke-dashoffset

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
		<circle cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12"
            stroke-dasharray="339.292" stroke-dashoffset="-200" transform ="rotate(-90, 60,60)"/>
</svg>

这篇关于SVG Circle文件在Windows上从顶部沿逆时针方向笔触的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！