CSS径向渐变到SVG径向渐变 [英] CSS radial gradient to SVG radial gradient
本文介绍了CSS径向渐变到SVG径向渐变的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以像在CSS http://codepen中一样在SVG中进行径向渐变. io/A973C/pen/hnEaf (我指的是交通信号灯中的灯)
is it possible to make an radial gradient in SVG like it is here in CSS http://codepen.io/A973C/pen/hnEaf (i mean the lights in the trafficlight)
.red{
background: red;
background-image: radial-gradient(brown, transparent);
background-size: 15px 15px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 35px;
animation: 13s red infinite;
border: dotted 2px red;
box-shadow:
0 0 20px #111 inset,
0 0 10px red;
}
我的SVG渐变如下所示 http://jsfiddle.net/x9a2Lyx1/ 我真的不明白如何在css示例中像它一样重复渐变
my SVG gradient looks like this http://jsfiddle.net/x9a2Lyx1/ I dont really understand how i can repeat the gradient like its in the css example
推荐答案
ive使用SVG模式解决了此问题-> http://jsfiddle.net/k5527kym/
ive solved this using SVG Pattern -> http://jsfiddle.net/k5527kym/
<pattern id="muster_c" patternUnits="userSpaceOnUse" width="2" height="2" x="0" y="0">
<circle cx="1" cy="1" r="2" fill="url(#MyGradient)"/>
</pattern>
这篇关于CSS径向渐变到SVG径向渐变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文