Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   размещение ссылок на окружности с заданным радиусом (https://javascript.ru/forum/dom-window/51301-razmeshhenie-ssylok-na-okruzhnosti-s-zadannym-radiusom.html)

Ваня98 01.11.2014 12:32
размещение ссылок на окружности с заданным радиусом
 
Вложений: 4
Добрый день, форумчане!
Помогите пожалуйста разрешить следующую ситуацию.
Необходимо разместить ссылки на окружности с заданным радиусом, в частном случае, он равен 112.5.
Попытался сделать с помощью подгонки параметров угла поворота и перемещения по осям для каждой ссылки (пример: 
-webkit-transform: translate(30px, 0px) rotate(45deg);
), в итоги получилось что-то похожее на правду. Но необходимого радиуса так и не добился. Подскажите пожалуйста, каким образом можно добиться точности построения окружности ссылок с необходимым радиусом.
Пробывал так же без использования transform с помощью добавления пробелов в название ссылки, радиус получается тот что нужен, но тогда что при нажатии одной счсылки выделяется другая и переход происходит именно по ней.
Вариант с использованием -webkit-transform:
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Текст по окружности</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.lettering.js"></script>
		<script type="text/javascript" src="eliptext.js"></script>

		<script type="text/javascript">
			$(document).ready(function () {
			$('#curved2').elipText({radius: 112.5, dir:1});
			$('#curved').elipText({radius: 112.5, dir:1});
			$('#curved3').elipText({radius: 112.5, dir:1});
			$('#curved4').elipText({radius: 112.5, dir:1});
			});
		</script>		

		<style style="text/css">
* 
					{
					padding: 0;
					margin: 0;
					}
.content
					{
					margin:auto;
					/*text-align:center;*/
					padding: 3px;
					}
span
					{
					font: 16px/1.4 georgia, arial;
					letter-spacing: 0;
					}

				
				
#curved 
				{
				position: absolute;		
				left: 60%;
				top:50%;
				/*z-index: 9;*/
				
			  /* -webkit-transform-origin: -100% 0;*/
                
                -webkit-transform: translate(-112.5px, 0px) rotate(-45deg);
				}
				
				
#curved2 
				{
				position: absolute;
				left: 60%;
				top:50%;
		/*	    z-index: 10;*/
				
		 
           -webkit-transform: translate(30px, 0px) rotate(45deg);  
          

				}
				
#curved3 
				{
				position: absolute;
				 left: 60%;
				top:50%;
				/*z-index: 20;*/
				-webkit-transform: translate(30px, 150px) rotate(140deg);
				}	
				
#curved4 
				{
				position: absolute;
				 left: 60%;
				top:50%;
			/*	z-index: 3;*/
				-webkit-transform: translate(-112.5px, 150px) rotate(220deg);
				}								
		</style>
			
</head>
	 
<body>
	<div class="content">                 
		<a href="http://javascript.ru"><span id="curved2">javascript.ru</span> </a>
       <a href="http://htmlbook.ru"><span id="curved">htmlbook.ru</span> </a>
        <a href="http://site-made.ru"><span id="curved3">site-made.ru</span> </a>
        <a href="http://technologyweb.org"><span id="curved4">technologyweb.org</span> </a>
   </div>
   	
</body>
</html>


Второй вариант с использованием пробелов:
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Текст по окружности</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.lettering.js"></script>
		<script type="text/javascript" src="eliptext.js"></script>

		<script type="text/javascript">
			$(document).ready(function () {
			$('#curved2').elipText({radius: 112.5, dir:1});
			$('#curved').elipText({radius: 112.5, dir:1});
			$('#curved3').elipText({radius: 112.5, dir:1});
			$('#curved4').elipText({radius: 112.5, dir:1});
			});
		</script>		

		<style style="text/css">
* 
					{
					padding: 0;
					margin: 0;
					}
.content
					{
					margin:auto;
					/*text-align:center;*/
					padding: 3px;
					}
span
					{
					font: 16px/1.4 georgia, arial;
					letter-spacing: 0;
					}

#curved2 
				{
				position: absolute;
				left: 60%;
				top:50%;
			    z-index: 10;
				}
				
				
#curved 
				{
				position: absolute;		
				left: 60%;
				top:50%;
				z-index: 9;
				}
				
#curved3 
				{
				position: absolute;
				 left: 60%;
				top:50%;
				z-index: 20;
				}	
				
#curved4 
				{
				position: absolute;
				 left: 60%;
				top:50%;
				z-index: 3;
				}								
		</style>
			
</head>
	 
<body>
	<div class="content">                 
		<a href="http://javascript.ru"><span id="curved2">javascript.ru</span> </a>
        <a href="http://htmlbook.ru"><span id="curved">                                                                                                                                       htmlbook.ru</span> </a>
        <a href="http://site-made.ru"><span id="curved3">                                                                                                                                                                                                                                  site-made.ru</span> </a>
        <a href="http://technologyweb.org"><span id="curved4">                                                                  technologyweb.org</span> </a>
            	</div>
   	
</body>
</html>

MallSerg 01.11.2014 13:07
Самый простой способ это SVG

Ваня98 01.11.2014 13:46
Спасибо, попробую.

Ваня98 01.11.2014 15:45
Цитата:
Сообщение от MallSerg (Сообщение 338620)
Самый простой способ это SVG
Подсажите пожалуйста как заменить текст на окружности на какую-либо внешнюю ссылку. Никак не получается.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="450">
<title>Текст вдоль траектории</title>
<desc>
Чтобы линии были не видны, элементы path
следует заключить в контейнер defs
</desc>
<defs>
<path id="mypath2" d="M50,150 A50,50 0 1,1 50,150.01"
stroke="grey" fill="none"/>
</defs>
<text font-size="20" font-family="arial" fill="red">
<textPath xlink:href="#mypath2" startOffset="0%">
Нехорошо подделывать печати
</textPath>
</text>
</svg>

MallSerg 01.11.2014 19:07
В SVG тоже есть ссылки в чем именно сложность?

Ваня98 02.11.2014 08:25
Большое спасибо MallSerg, всё получилось:victory:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="450">
<title>Текст вдоль траектории</title>
<desc>
Чтобы линии были не видны, элементы path
следует заключить в контейнер defs
</desc>
<defs>
<path id="mypath2" d="M50,150 A112.5,112.5 0 1,1 50,150.01"
stroke="grey" fill="none"/>
</defs>

<a xlink:href="http://www.rambler.ru">
<text font-size="20" font-family="arial" fill="red">
<textPath xlink:href="#mypath2" startOffset="15%">
Рамблер
</textPath>
</text>
</a>

<a xlink:href="http://www.yandex.ru">
<text font-size="20" font-family="arial" fill="red">
<textPath xlink:href="#mypath2" startOffset="0%">
Яндекс
</textPath>
</text>
</a>
</svg>

Ваня98 02.11.2014 09:00
Возник другой вопрос. А как теперь данный код вставить в html документ, чтобы он при этом был работоспособным?

Erolast 02.11.2014 10:58
https://www.google.com/search?q=html+вставка+svg

Ваня98 02.11.2014 12:33
Вложений: 1
Вставил при помощи <object>, но получилось что при нажатии на ссылки сайты открываются именно в этом окошке размером 400х450, а не на всю страницу как хочется. Подскажите, как можно реализовать открытие сайта на всю страницу при нажатии на ссылку ?

<object type="image/svg+xml" data="link.svg" width="400" height="450">
</object>


[IMG]c:\Users\Хозяин\Desktop\1.png[/IMG]
[IMG]c:\Users\Хозяин\Desktop\2.png[/IMG]

Ваня98 02.11.2014 12:39
Вложений: 2
Скриншоты для наглядности поместил во вложениях.


Часовой пояс GMT +3, время: 22:01.