stroke-dasharray

Animate calligraphy using image-file instead of SVG

由 让人想犯罪 __ 提交于 2021-01-29 17:36:02
问题 I am creating animated calligraphy using the stroke-dashoffset technique, applying the stroke as an animated mask on top of an SVG. This works on most browsers, but I would like to apply the same mask on top of a PNG instead. That way, even if the browser has trouble with both SVG and mask (IE...), at least it will just display the PNG as-is. Here is a codepen of the working calligraphy with pure SVG: https://codepen.io/benviatte/pen/PMzmYB Here is the codepen of the non-working calligraphy

How can I draw a pie chart only using stroke-dasharray, not stroke-dashoffset

由 随声附和 提交于 2021-01-07 01:42:31
问题 I am trying to draw a pie chart only using stroke-dasharray and other things like rotate and translate, I am not allowed to use stroke-dashoffset since it is not supported by wkhtmltopdf 0.12.5. I have tried to do something similar to the code below <svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid gray; "> <circle r="10" cx="10" cy="10" fill="white" /> <circle r="5" cx="10" cy="10" fill="bisque" stroke="tomato" stroke-width="10" stroke-dasharray="10.99 31.4" transform

SVG Counterclockwise

由 末鹿安然 提交于 2019-12-24 07:16:40
问题 For the project I'm working on, I have to be able to depict values from -100% to 100%. Is there any way that I can take an existing percentage circle such as the one below and make the progress indicator go backwards - as in counterclockwise? <div class="flex-wrapper"> <div class="single-chart"> <svg viewbox="0 0 36 36" class="circular-chart orange"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke

SVG - It is possible to add stroke-dasharray Gradient or transparent form one side [duplicate]

由 人走茶凉 提交于 2019-12-22 05:58:30
问题 This question already has answers here : Can I apply a gradient along an SVG path? (5 answers) Closed last year . I have created an SVG animation in which I am allowing stroke-dasharray to move. Is it possible that I can add a gradient to the tail of stroke-dasharray and keep one side transparent as you can see in the example? .svg-main { width: 700px; margin: 30px auto; position: relative; } svg#svga { position: absolute; top: 0; left: auto; bottom: auto; right: auto; } .st2{fill:none;stroke

Border styling of a circle to be ticks

由 做~自己de王妃 提交于 2019-12-12 21:14:13
问题 I have a circle that has dotted borders. However, instead of dots the border should be more like vertical dashes. Is there a way to make the border exactly the same as the design (the vertical dashes one not the thick solid line) with css? I want to change this class: "OtherCaptionBorder" My css: .caption_circle{ position: absolute; top: 450px; left: 7%; z-index: 10; padding-top: 35px; padding-bottom: 20px; color: #fff; text-align: center; height: 245px; width: 245px; background-color:

SVG stroke-dasharray offset not consistent

由 心已入冬 提交于 2019-12-09 08:23:33
问题 I have a series of circles with borders comprised of smaller circles which I will call 'dots'. I am then animating the circles by rotating them with CSS3's transform , each by either 5 or 15 degrees (alternating) more than the last starting with the middle circle not rotating at all. This alternating of degrees is due to the original offset of half of them of 5deg The animation itself works great, but the offset between each dot in a circle is not consistent. This is made obvious when the

SVG stroke-dasharray offset not consistent

由 走远了吗. 提交于 2019-12-03 10:37:11
I have a series of circles with borders comprised of smaller circles which I will call 'dots'. I am then animating the circles by rotating them with CSS3's transform , each by either 5 or 15 degrees (alternating) more than the last starting with the middle circle not rotating at all. This alternating of degrees is due to the original offset of half of them of 5deg The animation itself works great, but the offset between each dot in a circle is not consistent. This is made obvious when the animation completes, some dots jump back. If they were all off by a consistent amount then it would be an
订阅 stroke-dasharray