arc example

7 years ago · ab46f731d3
parent ad5321f58e
commit ab46f731d3
2 changed files with 14 additions and 4 deletions
--- a/SVG.md
+++ b/SVG.md
@ -459,6 +459,16 @@ Here are all the possible combinations for `sweep-flag` and `large-arc-flag`:

 ![](https://www.w3.org/TR/SVG/images/paths/arcs02.svg)

+Here's example code for a `path` that uses an arc in its `d` attribute:
+
+```html
+<path d="M10 10 A 50 50 0 0 0 50 10" stroke="black" fill="transparent"/>
+```
+
+Here's what it looks like:
+
+![](https://i.imgur.com/tpEXk2Z.png)
+
 Play with the values here: http://codepen.io/lingtalfi/pen/yaLWJG

 ### Documentation
--- a/examples/svg/index.html
+++ b/examples/svg/index.html
@ -5,9 +5,9 @@
    <body>
        <svg width=800 height=600>
            <!-- <circle r=45 cx=50 cy=50 fill=red stroke=blue stroke-width=5></circle> -->
-            <circle r="50" cx="200" cy="300"/>
-            <line x1="0" y1="0" x2="100" y2="100"/> <!-- this element won't be visible because it doesn't have a stroke -->
-            <line x1="0" y1="0" x2="100" y2="100" stroke="purple"/>
+            <!-- <circle r="50" cx="200" cy="300"/> -->
+            <!-- <line x1="0" y1="0" x2="100" y2="100"/> <!-- this element won't be visible because it doesn't have a stroke --> -->
+            <!-- <line x1="0" y1="0" x2="100" y2="100" stroke="purple"/>
            <rect x="50" y="20" width="150" height="150"/>
            <ellipse cx="200" cy="80" rx="100" ry="50"/>
            <polygon points="200,10 250,190 160,210" />
@ -16,7 +16,7 @@
            <g transform = "translate(20,30) rotate(45) scale(0.5)"></g>
            <path d="M150 0 L75 200 L225 200 Z" stroke="black" fill="transparent"/>
            <path d="M0 70 C 0 120, 50 120, 50 70 S 100 20, 100 70" stroke="black" fill="transparent"/>
-            <path d="M0 100 Q 50 50, 100 100 T 200 100 Z" stroke="black" fill="transparent"/>
+            <path d="M0 100 Q 50 50, 100 100 T 200 100 Z" stroke="black" fill="transparent"/> -->
            <path d="M10 10 A 50 50 0 0 0 50 10" stroke="black" fill="transparent"/>
        </svg>
    </body>