Изменить атрибуты, определенные в defs на элементе использования

Как я могу добиться изменения стиля "используемого элемента", определенного в defs, посредством скриптов? Я пытался переместиться в рабочие интерфейсы w3c, но я проиграл в этом лабиринте

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="100"
   height="100"
   id="svg1">

<defs>
   <g id="minchia" onclick="color(evt)">
     <rect width="50" height="50" style="fill:#ffff6e;stroke:#ee1400;stroke-width:3" />
   </g>
</defs>       

<script type="text/javascript"> 
<![CDATA[ 
function color(evt)
{   
    node = evt.target.correspondingUseElement;

    alert(node.getAttributeNS(null, "style"));   /* empty! */
    alert(node.getAttributeNS("http://www.w3.org/1999/xlink", "style"));   /* empty! */

    node.setAttributeNS("http://www.w3.org/1999/xlink", "fill", "blue");    /* nothing */
    node.setAttributeNS(null, "fill", "blue");  /* nothing */
}
]]> 
</script>

<use xlink:href="#minchia" id="frufru" x="10" y="10"  />       
</svg>

Обновление

Еще одна вещь: что, если ссылочный элемент - это "g", который содержит 2 других элемента, таких как прямоугольник и текст? Как установить атрибут для правильного дочернегоNode (с помощью методов DOM)? В этом примере setAttribute формирует первый дочерний элемент ссылочного элемента. Что, если мне нужно было создать второй?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="1000"
  height="1000"
  id="svg1">

<defs>
  <g id="test" onclick="color(evt)" >
 <rect
   width="54"
   height="58"
   x="1.5"
   y="1.5"
   id="rect5" />
<text
   x="-34"
   y="47"
   transform="matrix(0.66777386,-0.74436421,0.74436421,0.66777386,0,0)"
   id="text2987"
   style="font-size:30px;fill:#ffffff;stroke-width:0px">JC!</text>
 </g>
</defs>       

<script type="text/javascript"> 
<![CDATA[ 
function color(evt)
{   
node = evt.target.correspondingUseElement;
    node.setAttributeNS(null, "style", "fill:blue");    
}
]]> 
</script>

<use xlink:href="#test" id="frufru" x="10" y="10" style="fill:#000000" />       

</svg>

Ответы

Ответ 1

Как вы можете видеть в моей тестовой странице, если вы определяете визуальный стиль элемента внутри раздела <defs> документа вы не можете переопределить этот стиль в экземпляре <use>, а не через атрибут visual, атрибут style или класс CSS, примененный к <use>.

Snapshot of test results from linked SVG file, showing that only unstyled elements can be overridden

Кроме того, вы не можете использовать визуальный атрибут элемента <use> для каскадирования стилей до элементов источника; вы должны использовать стиль CSS для этого.

Вам нужно будет:

  • Убедитесь, что ваши определенные элементы не имеют визуального стиля и

  • Используйте CSS или задайте атрибут style, обработанный вручную или, например,

    node.setAttribute('style','fill:blue');

Как указано здесь, вы можете использовать setAttribute(...) или setAttributeNS(null,...) для атрибутов SVG.

Обновить. Чтобы ответить на второй вопрос:

Что, если ссылочный элемент является "g", который содержит 2 других элемента, таких как прямой и текст?

Вы не можете использовать правила CSS для выбора псевдо-детей <use>; их просто не существует. Однако вы можете применить неизменный стиль, который вы хотите сохранить внутри <def>, а затем применить style, который вы хотите, на <use>.

Например:

<defs>
  <g id="foo">
    <!-- Every rect instance should be filled with blue -->
    <rect width="54" height="58" x="1.5" y="1.5"
          fill="blue" />
    <!-- I want to be able to change text color per use
         so I must be sure not to specify the fill style -->
    <text x="-34" y="47" transform="matrix(0.668,-0.744,0.744,0.668,0,0)"
     style="font-size:30px;stroke-width:0px">JC!</text>
  </g>
</defs>
<use xlink:href="#foo" style="fill:orange" transform="translate(0,-100)" />
<use xlink:href="#foo" style="fill:yellow" transform="translate(0, 100)" />

Это работает только в том случае, если вы хотите, чтобы все сменные элементы устанавливали одинаковые атрибуты.

В отличие от HTML, разметкой в ​​SVG является презентация. То, что я предложил выше, - это немного хак, который работает, но в целом элементы <use> предназначены для создания полного представления определения. Если вам нужен пользовательский внешний вид для каждого экземпляра, возможно, вам следует рассмотреть элементы клонирования, изменить свойства и добавить их в документ вместо взлома <use>.

Ответ 2

Чтобы добавить к ответу @Phrogz, похоже, что даже если я попытаюсь перезаписать стили, определенные внутри тега symbol, он не будет перезаписан в теге использования. Скрипт для этого http://jsfiddle.net/rajkamal/xrdgf/