line-with-svg-background-ref.html (2017B)
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 <meta name="flags" content="svg"> 8 <style type="text/css"> 9 .svg { 10 background-color: #888; 11 width: 500px; 12 display: block; 13 height: 60px; 14 margin: 10px auto; 15 } 16 .svg text { 17 font-size: 25px; 18 line-height: 50px; 19 mix-blend-mode: normal; 20 } 21 </style> 22 </head> 23 <body> 24 <svg class="svg"> 25 <line class="multiply" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 26 </svg> 27 <svg class="svg"> 28 <line class="screen" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 29 </svg> 30 <svg class="svg"> 31 <line class="overlay" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 32 </svg> 33 <svg class="svg"> 34 <line class="darken" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 35 </svg> 36 <svg class="svg"> 37 <line class="lighten" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 38 </svg> 39 <svg class="svg"> 40 <line class="color-dodge" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 41 </svg> 42 <svg class="svg"> 43 <line class="hard-light" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 44 </svg> 45 <svg class="svg"> 46 <line class="soft-light" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 47 </svg> 48 <svg class="svg"> 49 <line class="difference" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 50 </svg> 51 <svg class="svg"> 52 <line class="exclusion" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" /> 53 </svg> 54 </body> 55 </html>