third_party/WebKit/LayoutTests/svg/custom/gradient-stroke-width.svg

   1 <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">
   2         <style type="text/css"><![CDATA[
   3         svg {
   4                 background-color: #ccc;
   5                 height: 500px;
   6         }
   7         #background {
   8                 fill: white;
   9         }
  10         stop.black {
  11                 stop-color: #000;
  12                 stop-opacity: 1;
  13         }
  14         stop.white {
  15                 stop-color: #000;
  16                 stop-opacity: 0.3;
  17         }
  18         stop.darkred {
  19                 stop-color: #d7433c;
  20                 stop-opacity: 1;
  21         }
  22         stop.lightred {
  23                 stop-color: #bd1f18;
  24                 stop-opacity: 0.27;
  25         }
  26         stop.darkblue {
  27                 stop-color: #3c43d7;
  28                 stop-opacity: 1;
  29         }
  30         stop.lightblue {
  31                  stop-color: #181fbd;
  32                  stop-opacity: 0.27;
  33         }
  34         .line {
  35                 stroke: #000;
  36         }
  37         .circle {
  38                 fill: black;
  39         }
  40         .piece {
  41                 stroke-width:10px;
  42         }
  43         ]]></style>
  44         <defs>
  45                 <linearGradient id="black2white">
  46                         <stop class="black" offset="0"/>
  47                         <stop class="white" offset="1"/>
  48                 </linearGradient>
  49                 <linearGradient id="red-grad">
  50                         <stop class="darkred" offset="0"/>
  51                         <stop class="lightred" offset="1"/>
  52                 </linearGradient>
  53                 <radialGradient r="50%" id="red-radial-grad" xlink:href="#red-grad"/>
  54                 <linearGradient x1="5%" y1="95%" x2="95%" y2="5%" id="border-grad" xlink:href="#black2white" />
  55         </defs>
  56         <circle id="circle" cx="100px" cy="100px" r="50px" style="fill:url(#red-radial-grad);stroke:url(#border-grad);" class="piece"/>
  57         <circle cx="47px" cy="47px" r="10px" class="piece" style="fill:url(#red-radial-grad);stroke:url(#border-grad);"/>
  58 </svg>