问题描述
我用带有填充笔触颜色的圆圈创建了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:
- 水平翻转圆圈，或
- 否定
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上从顶部沿逆时针方向笔触的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！