Menu
In the code below, I tried to move the polygon which is the arrow's head and place it at the position 100,100. But polygon is placed at wrong direction. The position of line and will change depending upon the input. I need the output to be something like this:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<polygon class="st0" points="2,7 0,0 11,7 0,14" transform="translate(100,100) rotate(45 0 0)"/ stroke="red" fill="red"/>
<line x1="0" y1="0" x2="100" y2="100" stroke="green"/>
</svg>
752
Rotate. The rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters x and y are supplied, the rotation is about the point (x, y) .
You can also rotate the path of the SVG directly via a transform in the itself.
Step 1: Draw the line segment between the vertex and the point of rotation. Step 2: Use a protractor to draw the angle of rotation. Step 3: Use a compass to mark the rotated vertex point on the other side of the angle. Step 4: Draw line segments connecting the rotated vertices.
Steps for Rotating & Graphing a PolygonStep 1: Identify the coordinates of the vertices of the polygon from the given graph. Step 2: Depending on the given degree of rotation, make the following changes to each of the vertices of the polygon. Remember, a positive rotation is counter-clockwise. Note, A becomes A'.
The smallest fix is probably to add a translation that lets you treat the concave part of the arrow as the origin for both the rotation and other translation.
<polygon … transform="translate(100 100) rotate(45 0 0) translate(-2 -7)" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="2,7 0,0 11,7 0,14" transform="translate(100 100) rotate(45 0 0) translate(-2 -7)" stroke="red" fill="red" />
<line x1="0" y1="0" x2="100" y2="100" stroke="green" />
</svg>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
