| <?xml version="1.0" encoding="UTF-8"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
| <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360"> |
| <style type="text/css"><![CDATA[ |
| /* use extra value (auto) to make the css properties invalid */ |
| #path1 { |
| fill: red auto; |
| fill-rule: evenodd auto; |
| fill-opacity: 10% auto; |
| marker-start: url(#marker1) auto; |
| marker-mid: url(#marker1) auto; |
| marker-end: url(#marker1) auto; |
| marker: url(#marker1) url(#marker1) url(#marker1) auto; |
| stroke-width: 100 auto; |
| stroke-opacity: 10% auto; |
| stroke-dasharray: 10 5 10 auto; |
| clip-path: url(#clip1) auto; |
| clip-rule: evenodd auto; |
| opacity: 0%; /* does not seem supported yet */ |
| visibility: hidden auto; |
| } |
| #circle { |
| filter: url(#blurxy) auto; |
| } |
| stop { |
| stop-color: red auto; |
| stop-opacity: 10% auto; |
| } |
| /* test text css props too? */ |
| ]]></style> |
| <defs> |
| <clipPath id="clip1"> |
| <circle cx="30" cy="40" r="10"/> |
| </clipPath> |
| <linearGradient id="grad" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"> |
| <stop stop-color="green" offset="0"/> |
| </linearGradient> |
| </defs> |
| <filter id="blurxy" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="120%" height="120%"> |
| <feGaussianBlur stdDeviation="5 1"/> |
| </filter> |
| <marker id="marker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth"> |
| <rect width="10" height="10" fill="red" stroke="none"/> |
| </marker> |
| <text x="0" y="13">The rect should be opaque green, black stroke,</text> |
| <text x="0" y="33">no markers and no dashes.</text> |
| <path id="path1" fill="green" stroke="black" d="M 30 40 L 80 40 L 80 90 L 30 90 Z"/> |
| <circle id="path2" fill="url(#grad)" stroke="black" cx="180" cy="60" r="20"/> |
| <text x="0" y="110">The circle should be opaque green, no filter,</text> |
| <text x="0" y="130">green stop color.</text> |
| </svg> |