marker-008.svg - mozsearch

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/painting/marker-008.svg - WPT Dashboard Interop Dashboard

Checkerboard

<svg width="500" height="300"

  xmlns="http://www.w3.org/2000/svg"

  xmlns:html="http://www.w3.org/1999/xhtml">

    <!--

    Test 'Marker-start', 'marker-mid', and 'marker-end' apply markers at the

    appropriate vertices when applied to 'line', 'path', 'polygon' and 'polyline'

    elements.

    Note: 'marker-mid' has no effect on the 'line' element.

-->

    <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/>

    <html:link rel="match" href="marker-008-ref.svg"/>

    <html:meta name="assert" content="Tests marker-* render at the appropriate vertices."/>

    <style type="text/css">

        .start

            marker-start: url(#markerTest);

        .end

            marker-end: url(#markerTest);

        .mid

            marker-mid: url(#markerTest);

    </style>

    <defs>

        <marker id="markerTest" markerWidth="10" markerHeight="10" fill="blue">

            <rect width="50" height="55" />

        </marker>

    </defs>

    <line class="start" x1="10" y1="50" x2="100" y2="50" stroke="black" />

    <path class="start" d="M 10 100 L 50 100 L 100 100" stroke="black"/>

    <polygon class="start" points="10,150 50,150 100,150" stroke="black"/>

    <polyline class="start" points="10,200 50,200 100,200" stroke="black"/>

    <line class="end" x1="150" y1="50" x2="250" y2="50" stroke="black"/>

    <path class="end" d="M 150 100 L 200 100 L 250 100" stroke="black"/>

    <polygon class="end" points="250,150 200,150" stroke="black"/>

    <polyline class="end" points="150,200 200,200 250,200" stroke="black"/>

    <line class="mid" x1="300" y1="50" x2="400" y2="50" stroke="black"/>

    <path class="mid" d="M 300 100 L 350 100 L 400 100" stroke="black"/>

    <polygon class="mid" points="300,150 350,150" stroke="black"/>

    <polyline class="mid" points="300,200 350,200 400,200" stroke="black"/>

</svg>