chromium/third_party/blink/web_tests/svg/custom/gradient-stroke-width.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svgel" width="200px" height="200px">
	<style type="text/css"><![CDATA[
	svg {
		background-color: #ccc;
		height: 500px;
	}
	#background {
		fill: white;
	}
	stop.black {
		stop-color: #000;
		stop-opacity: 1;
	}
	stop.white {
		stop-color: #000;
		stop-opacity: 0.3;
	}
	stop.darkred {
		stop-color: #d7433c;
		stop-opacity: 1;
	}
	stop.lightred {
		stop-color: #bd1f18;
		stop-opacity: 0.27;
	}
	stop.darkblue {
		stop-color: #3c43d7;
		stop-opacity: 1;
	}
	stop.lightblue {
		 stop-color: #181fbd;
		 stop-opacity: 0.27;
	}
	.line {
		stroke: #000;
	}
	.circle {
		fill: black;
	}
	.piece {
		stroke-width:10px;
	}
	]]></style>
	<defs>
		<linearGradient id="black2white">
			<stop class="black" offset="0"/>
			<stop class="white" offset="1"/>
		</linearGradient>
		<linearGradient id="red-grad">
			<stop class="darkred" offset="0"/>
			<stop class="lightred" offset="1"/>
		</linearGradient>
		<radialGradient r="50%" id="red-radial-grad" xlink:href="#red-grad"/>
		<linearGradient x1="5%" y1="95%" x2="95%" y2="5%" id="border-grad" xlink:href="#black2white" />
	</defs>
	<circle id="circle" cx="100px" cy="100px" r="50px" style="fill:url(#red-radial-grad);stroke:url(#border-grad);" class="piece"/>
	<circle cx="47px" cy="47px" r="10px" class="piece" style="fill:url(#red-radial-grad);stroke:url(#border-grad);"/>
</svg>