динамические пути SVG с только Javascript/JQuery

Я ищу способ, который может уменьшить код нижединамические пути SVG с только Javascript/JQuery

Вы можете также просмотреть результат здесь https://jsfiddle.net/83qpktrx/

мой вопрос, можно ли записать "var pathx" динамически? если так как? то, что я хотел достичь, я только хочу написать 1 строку «var pathx», но атрибуты динамически различны, поэтому я могу отобразить «линейный путь» на 360 градусов, или я должен писать их один за другим 360 раз?

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>svg test</title> 
<style> 
    svg { 
     border: solid 1px #00f; 
     width: 700px; 
     height: 550px; 
    } 
</style> 
</head> 

<body> 
    <svg id="mysvg" width="300" height="300"></svg> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
    //dimension of svg 
    var svgw = $("#mysvg").width(); 
    var svgh = $("#mysvg").height(); 

    //center point of svg 
    var xcenter = svgw/2; 
    var ycenter = svgh/2; 

    var point = '<circle cx="' + xcenter + '" cy="' + ycenter + '" r="10" stroke="red" stroke-width="2" fill="orange" />'; 

    var path1 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" />'; 
    var path2 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-45 ' + xcenter + ' ' + ycenter + ')" />'; 
    var path3 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-90 ' + xcenter + ' ' + ycenter + ')" />'; 
    var path4 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-135 ' + xcenter + ' ' + ycenter + ')" />'; 
    var path5 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-180 ' + xcenter + ' ' + ycenter + ')" />'; 
    var path6 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-225 ' + xcenter + ' ' + ycenter + ')" />'; 
    var path7 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-270 ' + xcenter + ' ' + ycenter + ')" />'; 
    var path8 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-315 ' + xcenter + ' ' + ycenter + ')" />'; 

    $("#mysvg").html(point + path1 + path2 + path3 + path4 + path5 + path6 + path7 + path8); 
</script>

источник

2015-10-27 ha_ryu

360 линии, как описано ниже: http://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path/10477334#10477334 (полное раскрытие информации: его мой ответ) – Anthony

Вы действительно должны использовать createElementNS и appendChild для построения SVG. Это более гибко, и вам больше не нужен jQuery (jQuery не играет хорошо с SVG в любом случае - см. Этот пост: jquery's append not working with svg element?).

Обновлено JSFiddle: путь https://jsfiddle.net/83qpktrx/2/

источник

2015-10-27 02:47:51 Sphinxxx

Спасибо Sphinxxx, я думаю, что так я хочу, чтобы код был, мне все еще нужно больше время, чтобы понять код. :) –

Немного потрудился. в основном перемещали стили стилей в CSS, а также перемещали круг на более высокий слой лучей, чтобы он покрывал их вместо того, чтобы пересекать его: https://jsfiddle.net/83qpktrx/5/ Но хорошо сделано! – Anthony

Почему бы не использовать библиотеку JS, которая позволит сделать свой путь, добавляя точки и получить готовые к использованию пути? Я думаю, что это также делает его легче поддерживать этот код в будущем

http://paperjs.org/reference/path/#path

источник

2015-10-27 02:18:32

FabricJS - еще одна векторная библиотека js, я считаю. – Anthony

D3.js также является опцией, специально разработанной для SVG: https://github.com/mbostock/d3/wiki/Gallery – Sphinxxx

Привет, спасибо за предложения, но я хочу достичь этого только в Javascript/jQuery , да, я пробовал другие библиотеки, такие как D3.js, но прежде чем я пойду использовать другие библиотеки, я хочу сначала освоить JS/jQuery :) –

динамические пути SVG с только Javascript/JQuery

ответ

Смежные вопросы