line-with-svg-background.html (2520B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS mix-blend-mode API Test</title> 5 <link rel="author" title="dmyang" href="mailto:yangdemo@gmail.com"> 6 <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"><!-- 11-09-2013 @TestTWF Shenzhen --> 7 <link rel="help" href="http://www.w3.org/TR/compositing-1/#mix-blend-mode"> 8 <meta name="flags" content="svg"> 9 <style type="text/css"> 10 .svg { 11 background-color: #888; 12 width: 500px; 13 display: block; 14 height: 60px; 15 margin: 10px auto; 16 } 17 .svg text { 18 font-size: 25px; 19 line-height: 50px; 20 } 21 .multiply {mix-blend-mode: multiply;} 22 .screen {mix-blend-mode: screen;} 23 .overlay {mix-blend-mode: overlay;} 24 .darken {mix-blend-mode: darken;} 25 .color-dodge {mix-blend-mode: color-dodge;} 26 .color-burn {mix-blend-mode: color-burn;} 27 .hard-light {mix-blend-mode: hard-light;} 28 .soft-light {mix-blend-mode: soft-light;} 29 .difference {mix-blend-mode: difference;} 30 .exclusion {mix-blend-mode: exclusion;} 31 </style> 32 </head> 33 <body> 34 <svg class="svg"> 35 <line class="multiply" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 36 </svg> 37 <svg class="svg"> 38 <line class="screen" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 39 </svg> 40 <svg class="svg"> 41 <line class="overlay" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 42 </svg> 43 <svg class="svg"> 44 <line class="darken" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 45 </svg> 46 <svg class="svg"> 47 <line class="lighten" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 48 </svg> 49 <svg class="svg"> 50 <line class="color-dodge" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 51 </svg> 52 <svg class="svg"> 53 <line class="hard-light" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 54 </svg> 55 <svg class="svg"> 56 <line class="soft-light" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 57 </svg> 58 <svg class="svg"> 59 <line class="difference" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 60 </svg> 61 <svg class="svg"> 62 <line class="exclusion" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 63 </svg> 64 </body> 65 </html>