CODEWITHSUNDEEP
javascriptcsssvg
Ashok kumar
Ashok kumar

Reputation: 542

place a path at certain angle in SVG

I have the below code which contains a triangle drawn using (Path) and a circle. I want to place the triangle 45 degree in all the four axis. I dont know how to do it mathematically. The radius of the circle may vary. So How to place the triangle in 45 degree on 4 position respectively as shown in the below image?(triangle should be single pixel inside the circle). 

.st0{fill:#F24343;}
<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"
	 style="enable-background:new 0 0 22 14;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#F24343;}
</style>
  <circle cx="40" cy="40" r="20" fill="green"/>
<path class="st0" d="M22,0H0l9.4,12.8c0.8,1.1,2.4,1.1,3.2,0L22,0z" style="transform: translate(22px,44px) rotate(45deg)"/>
</svg>

 <circle cx="40" cy="40" r="20" fill="green"/>

Image for reference

Upvotes: 1

Views: 1735

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101820

You are making your own life difficult by defining your pointer triangle at some odd point away from where it is needed.

If you define your triange at it's normal "0" position, you can easily point it where you want it (see below).

The first value of rotate() is the angle and two other coordinates are the centre of rotation. In your case that's 40,40 (the centre of the circle).

.st0{fill:#F24343;}
<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"
	 style="enable-background:new 0 0 22 14;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#F24343;}
</style>
  <circle cx="40" cy="40" r="20" fill="green"/>
  <path class="st0" d="M28,21 L 52,21, L40,8 Z" transform="rotate(45, 40,40)"/>
</svg>

Upvotes: 0

Priyanka
Priyanka

Reputation: 126

You can either work with CSS Transforms or SVG transform attribute to achieve this.

You can rotate both path and the circle by putting circle and path inside tag and you can use CSS Transformations to rotate it.

<g class="rotate_me">
  <circle cx="40" cy="40" r="20" fill="green"/>
  <path transform="rotate(5 50 50)" class="st0" d="M22,0H0l9.4,12.8c0.8,1.1,2.4,1.1,3.2,0L22,0z" style="transform: translate(22px,44px) rotate(45deg)"/>
</g>

CSS: 

.rotate_me {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}

You can also add class to path and play with transform origin to get the required value.

<path class="rotate_me" d="M 15.1929 28.9648 L 15.1929 11.8555 L 29.1138 20.4102 L 15.1929 28.9648 Z" fill="#74c190"/>

CSS Transforms on SVG elements are not supported in IE9. You can try the transform attribute for path elements. 

<path transform="rotate(25 20 10)"  d="M 15.1929 28.9648 L 15.1929 11.8555 L 29.1138 20.4102 L 15.1929 28.9648 Z" fill="#74c190"/>

You might also want to look at: https://css-tricks.com/snippets/css/css-triangle/

You can refer to this rough sample codepen for all three samples: http://codepen.io/priyanka-herur/pen/yJRYZV

Upvotes: 1

Related Questions