csswg-test/compositing-1/line-with-svg-background-ref.html at master · javifernandez/csswg-test · GitHub

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

<!DOCTYPE html>

<html>

<head>

<title>CSS mix-blend-mode API Test</title>

<link rel="author" title="dmyang" href="mailto:yangdemo@gmail.com">

<link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com">

<meta name="flags" content="svg">

<style type="text/css">

.svg {

background-color: #888;

width: 500px;

display: block;

height: 60px;

margin: 10px auto;

}

.svg text {

font-size: 25px;

line-height: 50px;

mix-blend-mode: normal;

}

</style>

</head>

<body>

<svg class="svg">

<line class="multiply" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" />

</svg>

<svg class="svg">

<line class="screen" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" />

</svg>

<svg class="svg">

<line class="overlay" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" />

</svg>

<svg class="svg">

<line class="darken" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" />

</svg>

<svg class="svg">

<line class="lighten" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" />

</svg>

<svg class="svg">

<line class="color-dodge" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" />

</svg>

<svg class="svg">

<line class="hard-light" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" />

</svg>

<svg class="svg">

<line class="soft-light" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" />

</svg>

<svg class="svg">

<line class="difference" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" />

</svg>

<svg class="svg">

<line class="exclusion" x1="10" y1="30" x2="300" y2="30" style="stroke:blue; stroke-width:20;" />

</svg>

</body>

</html>