SVG逐渐消失

时间：2013-09-26 11:25:46

标签： svg

我对SVG图形都很陌生 我有以下svg：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="500" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon4" style="opacity:0.2" />
<polygon points="871.238,-308.807 500,499.999 735.504,-358.209 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon6" style="opacity:0.2" />
<polygon points="1125.478,-133.059 500,499.999 1014.826,-225.906 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon8" style="opacity:0.2" />
<polygon points="1304.275,119.045 500,499.999 1232.053,-6.048 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon10" style="opacity:0.2" />
<polygon points="1386.065,417.098 500,499.999 1360.982,274.847 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon12" style="opacity:0.2" />
<polygon points="1360.982,725.149 500,499.999 1386.064,582.898 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon14" style="opacity:0.2" />
<polygon points="1232.053,1006.044 500,499.999 1304.275,880.951 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon16" style="opacity:0.2" />
<polygon points="1014.826,1225.902 500,499.999 1125.479,1133.055 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon18" style="opacity:0.2" />
<polygon points="735.505,1358.206 500,499.999 871.238,1308.803 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon20" style="opacity:0.2" />
<polygon points="427.778,1386.996 500,499.999 572.223,1386.996 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon22" style="opacity:0.2" />
<polygon points="128.762,1308.803 500,499.999 264.496,1358.205 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon24" style="opacity:0.2" />
<polygon points="-125.477,1133.055 500,499.999 -14.826,1225.902 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon26" style="opacity:0.2" />
<polygon points="-304.274,880.951 500,499.999 -232.052,1006.044 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon28" style="opacity:0.2" />
<polygon points="-386.064,582.898 500,499.999 -360.981,725.148 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon30" style="opacity:0.2" />
<polygon points="-360.981,274.847 500,499.999 -386.063,417.098 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon32" style="opacity:0.2" />
<polygon points="-232.051,-6.049 500,499.999 -304.273,119.045 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon34" style="opacity:0.2" />
<polygon points="-14.825,-225.907 500,499.999 -125.476,-133.059 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon36" style="opacity:0.2" />
<polygon points="264.498,-358.211 500,499.999 128.763,-308.807 " transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)" id="polygon38" style="opacity:0.2" />
</svg>

这是一个带有光线的圆圈，看起来像这样：SVG graphic

我的问题是：如何让光线渐渐消失到边缘？
（我有Inkscape和CorelDraw X5用于处理矢量图形，或者只是一个普通的编辑器）

仅供参考：我想在我的网站上使用图片作为动画（通过CSS）背景图片。

非常感谢您的帮助！

2 个答案:

答案 0 :(得分：3)

一种方法是使用径向渐变：

<radialGradient id="grad" fx="0.5" fy="0.5" r="1" >
  <stop stop-opacity="1" offset="0"/>
  <stop stop-opacity="0" offset="0.6"/>
</radialGradient>

然后将其用作多边形元素的填充，例如通过css：

polygon { fill: url(#grad); }

示例：http://jsfiddle.net/xFfdn/

答案 1 :(得分：1)

好的，除了Erik的答案，这不是我想要的，至少还有其他三个选项。

第一：
使用<linearGradient>并旋转每条光线。

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="500" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style=";stop-opacity:0" />
<stop offset="100%" style="stop-opacity:1" />
</linearGradient>
</defs>
<g transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)">
<g>
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "        id="polygon4" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(20 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "  id="polygon6" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(40 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "  id="polygon8" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(60 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "     id="polygon10" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(80 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon12" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(100 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon14" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(120 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "   id="polygon16" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(140 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "  id="polygon18" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(160 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon20" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(180 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon22" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(200 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon24" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(220 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "   id="polygon26" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(240 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "   id="polygon28" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(260 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon30" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(280 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon32" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(300 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "     id="polygon34" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(320 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "   id="polygon36" style="opacity:0.2" fill="url(#grad1)" />
</g>
<g transform="rotate(340 500 499.999)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 "    id="polygon38" style="opacity:0.2" fill="url(#grad1)" />
</g>
</g>
</svg>

DEMO

第二：
这是一个脚本解决方案，它计算“每条光线”所需的值

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="500" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
<g id="g1" transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)">
<polygon points="572.223,-387 500,499.999 427.777,-386.999 " id="polygon4" style="opacity:0.2"/>
<polygon points="871.238,-308.807 500,499.999 735.504,-358.209 " id="polygon6" style="opacity:0.2" />
<polygon points="1125.478,-133.059 500,499.999 1014.826,-225.906 " id="polygon8" style="opacity:0.2" />
<polygon points="1304.275,119.045 500,499.999 1232.053,-6.048 " id="polygon10" style="opacity:0.2" />
<polygon points="1386.065,417.098 500,499.999 1360.982,274.847 " id="polygon12" style="opacity:0.2" />
<polygon points="1360.982,725.149 500,499.999 1386.064,582.898 " id="polygon14" style="opacity:0.2" />
<polygon points="1232.053,1006.044 500,499.999 1304.275,880.951 " id="polygon16" style="opacity:0.2" />
<polygon points="1014.826,1225.902 500,499.999 1125.479,1133.055 " id="polygon18" style="opacity:0.2" />
<polygon points="735.505,1358.206 500,499.999 871.238,1308.803 " id="polygon20" style="opacity:0.2" />
<polygon points="427.778,1386.996 500,499.999 572.223,1386.996 " id="polygon22" style="opacity:0.2" />
<polygon points="128.762,1308.803 500,499.999 264.496,1358.205 " id="polygon24" style="opacity:0.2" />
<polygon points="-125.477,1133.055 500,499.999 -14.826,1225.902 " id="polygon26" style="opacity:0.2" />
<polygon points="-304.274,880.951 500,499.999 -232.052,1006.044 " id="polygon28" style="opacity:0.2" />
<polygon points="-386.064,582.898 500,499.999 -360.981,725.148 " id="polygon30" style="opacity:0.2" />
<polygon points="-360.981,274.847 500,499.999 -386.063,417.098 " id="polygon32" style="opacity:0.2" />
<polygon points="-232.051,-6.049 500,499.999 -304.273,119.045 " id="polygon34" style="opacity:0.2" />
<polygon points="-14.825,-225.907 500,499.999 -125.476,-133.059 " id="polygon36" style="opacity:0.2" />
<polygon points="264.498,-358.211 500,499.999 128.763,-308.807 " id="polygon38" style="opacity:0.2" />
</g>
<script>
//<![CDATA[
var svgroot=document.documentElement;
var polygons=document.getElementsByTagName("polygon");
var d = document.createElementNS("http://www.w3.org/2000/svg", "defs");
for (var i =0 ; i < polygons.length; ++i) {
var lg = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
lg.x1.baseVal.newValueSpecifiedUnits(lg.x1.baseVal.SVG_LENGTHTYPE_NUMBER, polygons[i].points.getItem(1).x);
lg.y1.baseVal.newValueSpecifiedUnits(lg.y1.baseVal.SVG_LENGTHTYPE_NUMBER, polygons[i].points.getItem(1).y);
lg.x2.baseVal.newValueSpecifiedUnits(lg.y1.baseVal.SVG_LENGTHTYPE_NUMBER, (polygons[i].points.getItem(0).x + polygons[i].points.getItem(2).x) / 2);
lg.y2.baseVal.newValueSpecifiedUnits(lg.y1.baseVal.SVG_LENGTHTYPE_NUMBER, polygons[i].points.getItem(0).y == polygons[i].points.getItem(2).y ? polygons[i].points.getItem(0).y : ((polygons[i].points.getItem(0).x + polygons[i].points.getItem(2).x) / -2) * ((polygons[i].points.getItem(0).x - polygons[i].points.getItem(2).x) / (polygons[i].points.getItem(0).y - polygons[i].points.getItem(2).y))
+ (polygons[i].points.getItem(0).x * polygons[i].points.getItem(0).x - polygons[i].points.getItem(2).x * polygons[i].points.getItem(2).x + polygons[i].points.getItem(0).y * polygons[i].points.getItem(0).y - polygons[i].points.getItem(2).y * polygons[i].points.getItem(2).y)
/ (2 * (polygons[i].points.getItem(0).y - polygons[i].points.getItem(2).y)));
lg.setAttribute("gradientUnits", "userSpaceOnUse");
lg.id="grad"+i;
polygons[i].setAttribute("fill", "url(#grad" + i + ")");
var s0 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
s0.setAttribute("offset", "0");
s0.setAttribute("stop-opacity", "1");
lg.appendChild(s0);
var s1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
s1.setAttribute("offset", "1");
s1.setAttribute("stop-opacity", "0");
lg.appendChild(s1);
d.appendChild(lg);
}
var g1 = document.getElementById("g1");
g1.appendChild(d);
//]]>
</script>
</svg>

DEMO

第三：
这一个使用<radialGradient>用于fill属性。

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="500" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
<g id="g1" transform="matrix(0.28053959,0,0,0.28053959,109.73006,109.73077)">
<defs>
<radialGradient id="grad1" cx="500" cy="499.999" r="887" fx="500" fy="499.999"  gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-opacity="1" />
<stop offset="100%" stop-opacity="0" />
</radialGradient>
</defs>

<polygon points="572.223,-387 500,499.999 427.777,-386.999 " id="polygon4" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="871.238,-308.807 500,499.999 735.504,-358.209 " id="polygon6" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="1125.478,-133.059 500,499.999 1014.826,-225.906 " id="polygon8" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="1304.275,119.045 500,499.999 1232.053,-6.048 " id="polygon10" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="1386.065,417.098 500,499.999 1360.982,274.847 " id="polygon12" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="1360.982,725.149 500,499.999 1386.064,582.898 " id="polygon14" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="1232.053,1006.044 500,499.999 1304.275,880.951 " id="polygon16" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="1014.826,1225.902 500,499.999 1125.479,1133.055 " id="polygon18" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="735.505,1358.206 500,499.999 871.238,1308.803 " id="polygon20" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="427.778,1386.996 500,499.999 572.223,1386.996 " id="polygon22" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="128.762,1308.803 500,499.999 264.496,1358.205 " id="polygon24" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="-125.477,1133.055 500,499.999 -14.826,1225.902 " id="polygon26" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="-304.274,880.951 500,499.999 -232.052,1006.044 " id="polygon28" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="-386.064,582.898 500,499.999 -360.981,725.148 " id="polygon30" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="-360.981,274.847 500,499.999 -386.063,417.098 " id="polygon32" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="-232.051,-6.049 500,499.999 -304.273,119.045 " id="polygon34" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="-14.825,-225.907 500,499.999 -125.476,-133.059 " id="polygon36" style="opacity:0.2" fill="url(#grad1)"/>
<polygon points="264.498,-358.211 500,499.999 128.763,-308.807 " id="polygon38" style="opacity:0.2" fill="url(#grad1)"/>
</g>
</svg>

DEMO

后者是我的首选 - 代码短，不依赖于脚本支持 但它只是表明通常有许多不同的解决方案！

来自德国SELFHTML forum的用户'未知'的信用 - 谢谢！

相关问题
最新问题