javascript - Absolutely Position Element Around a Circle -

-

I have some HTML below with embedded SVG 

  & lt; Section id = "deck-head" & gt; & Lt; Svg xmlns = "http://www.w3.org/2000/svg" width = "250" height = "250" & gt; & Lt; Ch & gt; & Lt; Title & gt; Marker & lt; / Title & gt; & Lt; G id = "marker-frame" & gt; & Lt; Path across = "white" D = "M 133.300003,64.800003l0, -33.500004 L-16.100006,0 l0.3339999 9C-30.799995,3.700005-53.499996,29.599998-53.499996,60.800003c0,33.900002 27.600002,61.299995 61.299999,61.299995C61 300003, -27.399994 61.300003, -61.299995c0, -30.900002 -23.600006, -56.599998 -53, -60.599998zm-53.5606099997c0, -24.900002 20.299995, -45.199997 45.199997, -45.199997 S 45.199997,20.299995 45.199997,45.199997s-20.199997, 45.300003 -45.199997,45.300003-45.199997, -20.400009 -45.199997, -45.300003z "/> & Lt; / G> & Lt; / G> & Lt; / Svg & gt; & Lt; Marks & gt; 90 & amp; nbsp; Degree; & Lt; / Marks & gt; & Lt; / Section & gt;

I should be able to replicate the following layouts without using an external JavaScript library

ignore red

I managed to rotate SVG in the right direction Am - though I'm having trouble, this element is taking the whole situation from the tick / tip of the pink circle, depending on which direction The Umta.

In my head the argument was that I had the following lines with: get circle center point get rotation left & amp; The above situation will be based on the top above.

However, I have been completely lost that to get the top and left coordinates, that calculation will be completely lost, where it can create the position of the place where it should be.

These are just simple polar coordinates. JQuery is not needed, just for easy manipulations 

  var angle = 0, center = 125, radius = 110, pi = monastery. PI; Set Intrvol (function () {angle + = 1; $ ( '# C'). Atrr ( 'transform', 'Rotate (' + + ', 125, 125)); // calculate new coordinates for Mark xx = center + radius * Gnitkos (angle * pi / 180 - PI / 2); var y = center + radius * math. (angle * P / 180 - PI / 2); $ ( '# M'). css ( {Top: y + 'pixels', left: x + 'pixels'});}, 100);  body {background-color: black;} #m {position: absolute;} section {poisition:   
  & lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Section id = "deck-head" & gt; & Lt; Svg xmlns = "http://www.w3.org/2000/svg" width = "250" height = "250" & gt; & Lt; Ch & gt; & Lt; Title & gt; Marker & lt; / Title & gt; & Lt; G id = "marker-frame" & gt; & Lt; Path fill = "white" id = "c" d = "m133.300003,64.800003l0, -33.500004l-16.100006,0l0,33.299999c-30.799995,3.700005 -53.499996,29.599998 -53.499996,60.800003c0,33.900002 27.6, 00,002, 61.299995 61.299999,61.299995s61.300003, -27.399994, 61.300003, -61.299995c0, -30.900002 -23.600006, -56.599998 -53, -60.599998zm-53.5606099997 C, -24.900002 20.299995, -45.199997 45.199 997, -45.199997s45 .199997,20.299995 45.199997,45.199997 -20.199997,45.300003 -45.199997,45.300003-45.199 997, -20.400009 -45.199 997, -45.300003z "/ & gt; & Lt; / G> & Lt; / G> & Lt; / Svg & gt; & Lt; Icon id = 'm' & gt; 90 & amp; nbsp; Deg; & Lt; / Symbol & gt; & Lt; / Section & gt;


Comments

Post a Comment

Popular posts from this blog

winforms - C# Form - Property Change -

-
I have a form that has a property named car A class with many properties. The Properties is being displayed on the current car on the basis of some user actions that are being displayed. So I have to know whether the property has been allocated or set to zero. I'm aware of INotifyPropertyChanged , but in my case I'm not sure that since this change I have changed my car properties car do not want to monitor the property. Any idea how to accomplish this? In advance thank you If you have created a true asset in your class then You should be a great and setter, you can add the code directly to the form property in order to take action on the basis of "form": Public partial category Form 1: form {public form 1 () {InitializeComponent (); } // define car square public class car {public string name = string. Empty; } // private car to keep the value of the current car private variable _car = null; // Property of public form which you can ru...
Read more

java - Messages from .properties file do not display UTF-8 characters -

-
Image
In the form of a title, I can only add that if I enter the html file manually, then it Okay. View Rolver: & lt; Bean id = "templorellolver" class = "org.thymeleaf.templateresolver.ServletContextTemplateResolver" & gt; & Lt; Property name = "prefix" value = "/ web-nf / templates" /> & Lt; Property name = "suffix" value = ". Html" /> & Lt; Property Name = "Template Mode" Value = "HTML5" /> & Lt; Asset name = "cacheable" value = "wrong" /> & Lt; Property Name = "characterEncoding" value = "UTF-8" /> & Lt; / Bean & gt; & Lt; Bean id = "Template Engine" class = "org.thymeleaf.spring3.SpringTemplateEngine" & gt; & Lt; Property Name = "Temploreolar" ref = "Templarolver" /> & Lt; / Bean & gt; & Lt; Bean square = "org.thymeleaf.spring3.view.Thymel...
Read more

javascript - amcharts makechart not working -

-
I am trying to create an amiratars serial chart on my Durandal single page application. This chart was working fine on Chrome browser but it is not working on IE. Can you please help me in this regard. Error while using Amcharts. The Macchart () method does not support the object in this object in IE.
Read more