Динамический выбор CSS внутри группы, SVG, Путь

Я изучаю CSS и работаю над проблемой динамического выбора цвета пути.Динамический выбор CSS внутри группы, SVG, Путь

У меня есть SVG, который может иметь любое количество путей (1+), и есть предопределенные цвета, которые должны быть назначены путям в зависимости от их порядка. (Веб-служба возвращает коллекцию путей).

Для простоты предположим, что у меня есть 4 известных пути и возможны два цвета: зеленый и глубокий.

Вопрос: Как я могу назначить следующие цвета динамически (без создания отдельных классов для каждого пути):

Path1: Зеленый
Path2: deepPink
путь3: Зеленый
path4 : deepPink

.path_group { 
 
    stroke="black"; 
 
    fill="none"; 
 
    stroke-width="2"; 
 
} 
 

 
.myPath{ 
 
    stroke:deepPink; 
 
    stroke-width:1.3; 
 
} 
 

 
/* 
 
Color1: Green 
 
Color2: deepPink 
 
*/

<svg width="100%" height="100%" viewBox="0 0 260 200" 
 
    xmlns="http://www.w3.org/2000/svg"> 
 
    <g class="path_group" > 
 
    <path class="myPath" d="M10,25 L110,10" /> 
 
    <path class="myPath" d="M10,35 L110,20" /> 
 
    <path class="myPath" d="M10,45 L110,30" /> 
 
    <path class="myPath" d="M10,55 L110,40" /> 
 
    </g> 
 
</svg>

Я больше заинтересован в этом его нативно с помощью CSS/JS вместо добавления каких-либо рамок или библиотеки для моего проекта. Приветствуется предложение относительно любой конкретной концепции.

Demo: Codepen

Текущий подход

this.colors = ["green", "deepPink"]; 

this.getColor = function (pathIndex) { 
    return this.colors[pathIndex % this.colors.length]; 
};

источник

2014-09-17 Rohit

Обычно динамический CSS - это не очень хорошая идея (по крайней мере, это то, что мне сказали) –

. Вы добавляли бы классы к каждому, если специально, когда вы повторяете цвета, или же вы можете использовать диапазон цветов, например, когда вы печатаете графики. – bitoiu

Я добавил образец кода. В настоящее время, когда я создаю новый SVG, я вызываю метод getColor с индексом пути и устанавливаю цвет, возвращаемый как жестко закодированное значение в svg – Rohit

Вы можете использовать CSS3 :nth-child() селектор (w3schools), как это:

.myPath { stroke-width:1.3; } 

.path_group .myPath:nth-child(4n+1) 
{ stroke:red; } 
.path_group .myPath:nth-child(4n+2) 
{ stroke:blue; } 
.path_group .myPath:nth-child(4n+3) 
{ stroke:green; } 
.path_group .myPath:nth-child(4n+4) 
{ stroke:deepPink; }

См обновленный codepen here.

источник

2014-09-20 12:25:50

Динамический выбор CSS внутри группы, SVG, Путь

ответ

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