線状のグラデーションを定義する。fillやstrokeに色を指定する変わりにこの定義をしていすることで、グラデーションを表示する。
linearGradientでグラデーションの方向や属性を定義し、stopで使用する色及びその色の位置を定義する。
<linearGradient gradientUnits="単位" x1="開始X座標" y1="開始Y座標" x2="終了X座標" y2="終了Y座標" spreadMethod="塗潰し方法" >
<stop offset="位置" stop-color="色" />
<stop offset="位置" stop-color="色" />
</linearGradient>
linearGradientにidを指定しておき、そのidを利用先で指定する。
fill="url(グラデーション定義URL)"
stroke="url(グラデーション定義URL)"
グラデーションを描画する単位を指定する。省略時は、objectBoundingBoxとなる。
グラデーションの傾きを指定する。x1,y1は開始座標、x2,y2は終了座標を表し、単位内の比率で表す。
x1,y1,x2,y2でグラデーションの傾きと方向を指定する。省略時は、x1=0%,y1=0%,x2=100%,y2=0%(左から右へ水平に)である。
グラデーションを描画した残りの部分の塗潰し方法を指定する。省略時は、padとなる。
x1,y1,x2,y2で指定した直線上の相対位置を指定する。
offsetで指定した相対位置に表示する色を指定する。
<defs> <linearGradient id="Gradient1" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="objectBoundingBox" spreadMethod="pad"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="blue" /> </linearGradient> <linearGradient id="Gradient2" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="objectBoundingBox" spreadMethod="pad"> <stop offset="40%" stop-color="red" /> <stop offset="60%" stop-color="blue" /> </linearGradient> <linearGradient id="Gradient3" x1="0%" y1="0%" x2="30%" y2="0%" gradientUnits="objectBoundingBox" spreadMethod="pad"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="blue" /> </linearGradient> <linearGradient id="Gradient4" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="objectBoundingBox" spreadMethod="pad"> <stop offset="20%" stop-color="red" /> <stop offset="50%" stop-color="blue" /> <stop offset="80%" stop-color="yellow" /> </linearGradient> </defs> <rect fill="url(#Gradient1)" stroke="black" stroke-width="5" x="5" y="5" width="190" height="40"/> <rect fill="url(#Gradient2)" stroke="black" stroke-width="5" x="5" y="55" width="190" height="40"/> <rect fill="url(#Gradient3)" stroke="black" stroke-width="5" x="5" y="105" width="190" height="40"/> <rect fill="url(#Gradient4)" stroke="black" stroke-width="5" x="5" y="155" width="190" height="40"/> |
<defs> <linearGradient id="Gradient4" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="objectBoundingBox" spreadMethod="pad"> <stop offset="20%" stop-color="red" /> <stop offset="50%" stop-color="blue" /> <stop offset="80%" stop-color="yellow" /> </linearGradient> </defs> <rect fill="url(#Gradient4)" stroke="black" stroke-width="5" x="5" y="5" width="190" height="40"/> <rect fill="url(#Gradient4)" stroke="black" stroke-width="5" x="5" y="55" width="190" height="40"/> |
<defs> <linearGradient id="Gradient4" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse" spreadMethod="pad"> <stop offset="20%" stop-color="red" /> <stop offset="50%" stop-color="blue" /> <stop offset="80%" stop-color="yellow" /> </linearGradient> </defs> <rect fill="url(#Gradient4)" stroke="black" stroke-width="5" x="5" y="5" width="190" height="40"/> <rect fill="url(#Gradient4)" stroke="black" stroke-width="5" x="5" y="55" width="190" height="40"/> |
<defs> <linearGradient id="Gradient3" x1="0%" y1="0%" x2="30%" y2="0%" gradientUnits="objectBoundingBox" spreadMethod="pad"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="blue" /> </linearGradient> </defs> <rect fill="url(#Gradient3)" stroke="black" stroke-width="5" x="5" y="5" width="190" height="90"/> |
<defs> <linearGradient id="Gradient3" x1="0%" y1="0%" x2="30%" y2="0%" gradientUnits="objectBoundingBox" spreadMethod="reflect"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="blue" /> </linearGradient> </defs> <rect fill="url(#Gradient3)" stroke="black" stroke-width="5" x="5" y="5" width="190" height="90"/> |
<defs> <linearGradient id="Gradient3" x1="0%" y1="0%" x2="30%" y2="0%" gradientUnits="objectBoundingBox" spreadMethod="repeat"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="blue" /> </linearGradient> </defs> <rect fill="url(#Gradient3)" stroke="black" stroke-width="5" x="5" y="5" width="190" height="90"/> |
<defs> <linearGradient id="Gradient1" x1="0%" y1="0%" x2="10%" y2="10%" gradientUnits="userSpaceOnUse" spreadMethod="reflect"> <stop offset="0%" stop-color="blue" /> <stop offset="100%" stop-color="yellow" /> </linearGradient> <linearGradient id="Gradient2" x1="0%" y1="100%" x2="100%" y2="0%" gradientUnits="objectBoundingBox" spreadMethod="pad"> <stop offset="0%" stop-color="red" /> <stop offset="33%" stop-color="blue" /> <stop offset="66%" stop-color="green" /> <stop offset="100%" stop-color="yellow" /> </linearGradient> </defs> <rect fill="url(#Gradient2)" stroke="url(#Gradient1)" stroke-width="8" x="5" y="5" width="150" height="90"/> <circle fill="url(#Gradient2)" stroke="url(#Gradient1)" stroke-width="8" cx="160" cy="60" r="35"/> |