Изменения стиля в скрипте фейсплейта

[manjey73]

  <defs id="dqs{0}">
	<style>
	.strw { fill: none;stroke: #f00;stroke-linecap: round;stroke-linejoin: round;stroke-width: 1 } 
	</style>
    <g id="gg1{0}">
      <path id="pt1{0}" class="strw" d="M 21.3 61 V 4.54" />
    </g>
  </defs>

Собственно в SVG есть стиль в defs — как найти и заменить стиль скриптом в фейсплейте ?

Для jQuery предлагается такой вариант —
$('.strw').css('stroke-width', '1'); // Возвращаем исходную толщину

Но я не очень понимаю в данном случае, как тут надо действовать с учетом args — что искать, или как менять ?
Мне было бы удобнее сделать в таком виде стиль, так как он применятся ко многим элементам, а не прописывать стили непосредственно в элементах в виде атрибутов и потом их у каждого менять.

• Тема изменена 2 дня, 5 часов назад пользователем manjey73.
• Тема изменена 2 дня, 5 часов назад пользователем manjey73.

[Mikhail]

style — это отдельный элемент DOM. Чтобы его изменить, нужно найти элемент, удалить и вставить новый. Но в целом, это неверный подход. Классы обычно не меняются в ходе работы.
id элемента меняется динамически. Поэтому элемент нужно искать по его классу, например,
<defs id="dqs{0}" class="myclass">…

• Ответ изменён 1 день, 3 часа назад пользователем Mikhail.

[Mikhail]

Можно style оставить фиксированным, а менять стили у конкретных элементов. Стиль элемента имеет более высокий приоритет.

[manjey73]

я знаю, что стиль элемента имеет более высокий приоритет.
Вопрос в том, судя по описанию в нете, что изменить css в классе, вроде как можно, но уже в построенном DOM.
А тут как обычно, перед domUpdated происходит копирование из исходника и непонятно, сработает или нет.
Поменять в общем классе <style> удобнее, так как например задать толщину всем линиям проще в одном месте, а не писать портянки, чтобы поменять у каждого компонента.

Вот в чем загвоздка…

Как найти класс в defs, учитывая, что их там будет несколько? правильный пример с учетом args.component.dom.find или как правильно?
Я всякие варианты перепробовал, лыжи не едут.

[manjey73]

$('.strw').css('stroke-width', '1');

вот strw это класс в <style> внутри <defs> — как эту же строчку выполнить с учетом того, что мы передаем args ?

[Mikhail]

как эту же строчку выполнить с учетом того, что мы передаем args ?

Не уверен, что возможно изменить класс strw внутри элемента style, не заменив элемент style целиком. Если найдёте как это делается, расскажите.

[manjey73]

так я привел пример, который предлагает интернет.
Как поменять целиком тоже есть через .css()

Тут вопрос как заменить вот это $('.strw') — до класса внутри <style> как добраться , учитывая что мы передаем в виде args ????

Единственное, интернет пишет, что изменения производятся уже в DOM (тут мне до сих порт непонятно поведение копирования разметки перед domUpdated)
И поменяются только существующие элементы, использующие данный класс (что собственно и надо), а новые получат стили по умолчанию…

я просто не пойму как к этому подобраться, учитывая что это jQuery объект а не прямая работа с DOM

[manjey73]

6. Часто проще изменить сами элементы, а не <style>
Если вам нужно просто перекрасить элементы с классом .circle, можно сделать так:

$('#mySvg .circle').css('fill', 'red');

ну и все в подобном духе…

[manjey73]

style при этом может быть в корне svg или чаще всего в defs

  <defs id="dqs{0}">
	<style id="style{0}" >
		.strw { fill: none;stroke: #f0f;stroke-linecap: round;stroke-linejoin: round;stroke-width: 1 } 
		.s1 { fill: none;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 5 } 
	</style>
</defs>

[manjey73]

id можно добавить хоть к defs, хоть к style, это будет работать.

И еще, если я открою консоль, и руками поменяю в стиле цвет например, он поменяется у элемента, который его использует. Значит это возможно сделать.

Осталось определить как с учетом реалий фейсплейта.

• Ответ изменён 5 часов, 25 минут назад пользователем manjey73.

[manjey73]

получилось целиком переписать <style> через .text() в скрипте.
Но это не очень хороший выход, надо все же как правильно подобраться к .css и менять конкретные стили, так как в style их может быть много, переписывать каждый раз некрасиво.

Для создания (точнее перезаписи) получилось так

var newCss = '.strw { fill: none; stroke: #f0f; stroke-linecap: round; ' +
             'stroke-linejoin: round; stroke-width: 3; }';
args.component.dom.find(<code>#dqs${idPrefix}</code>).find("style").text(newCss);

а надо желательно искать классы внутри style и использовать .css() в модификациях

[Автор]

Записи