Управление объектами с помощью JS - PullRequest
Новая
       10

Управление объектами с помощью JS

1 голос
/ 14 сентября 2011

Я хочу изменить атрибут с SVG-объекта. 

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>SVG use test</title>
<script type="text/javascript">
function setUsedFill(uId, fill) {
  document.getElementById(uId).instanceRoot.correspondingElement.setAttributeNS(null, 'fill', fill);
}
</script>
</head>
<body>
<div>
<input type="button" value="test" onclick="setUsedFill('uc1', 'yellow');"/>
<input type="button" value="test" onclick="setUsedFill('uc2', 'red');"/>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <defs>
    <circle id="c1" cx="50" cy="50" r="30" fill="green"/>
  </defs>
  <use id="uc1" x="0" y="0" xlink:href="#c1"></use>
  <use id="uc2" x="100" y="100" xlink:href="#c1"></use>
</svg>
</div>
</body>
</html>

Этот код выполняется в Opera, Chrome и IE 9.

instanceRoot.correspondingElement - не работает в Firefox/ Mozilla

Ответы [ 3 ]

1 голос
/ 14 сентября 2011

В комментарии к другому ответу вы спросили "есть ли альтернатива?"

Для работы с SVG я использую альтернативную библиотеку Raphael javascript.

Это отличная библиотека для работы с SVG-графикой и анимацией в Javascript; делает все намного проще, и в качестве дополнительного бонуса он работает даже в некоторых действительно старых браузерах - включая старые версии IE, вплоть до IE6.

Причина, по которой он работает с IE, заключается в том, что он прозрачно обнаруживает браузер и переключается на рисование графики с использованием VML вместо SVG. Но с вашей точки зрения как разработчика вам не нужно знать об этом; все, что вам нужно знать, это то, что он работает во всех браузерах. Сладкое.

Это также не зависит от других библиотек; вам не нужно использовать JQuery или что-то еще, чтобы использовать его (хотя он прекрасно работает с ними, если вы хотите).

Сейчас я не делаю никакой работы в чистом SVG; все делается через Рафаэля.

1 голос
/ 14 сентября 2011

Из того, что я могу сказать здесь Mozilla не поддерживает (или даже не упоминает) instanceRoot свойство.

Последнее обновление страницы - 27 июня 2011 г.

Как примечание, в любом случае - насколько я могу судить - вам требуется Firefox 4+ для правильного использования SVG.

EDIT:

Или, возможно, если вам это подходит, вы можете немного изменить свой код: 

function setUsedFill1(uId, fill) {
  document.getElementById(uId).setAttributeNS(null, 'fill', fill);
}

и назовите его: 

<input type="button" value="test" onclick="setUsedFill1('c1', 'yellow');"/>

вместо.

0 голосов
/ 30 апреля 2014

Хотя это не совсем понятно в документации, установка значений в instanceRoot currentInstance элемента использования устанавливает фактический элемент в def. По крайней мере, это похоже на работу с Chrome и IE11. FF29 до сих пор не имеет экземпляра Root.

Есть две настройки, чтобы пример OP работал так, как задумано:

  1. Установите заливку c1 в 1011 * унаследуют *
  2. В обработчике клика установите атрибут fill элемента use, а не instanceRoot.correspondingElement.

Вот модифицированный код ОП: 

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <title>SVG use test</title>
      <script type="text/javascript">
        function setUsedFill(uId, fill) {
          /* Set the fill attribute of the <use> element, not the inner instanceRoot.correspondingElement */  
          document.getElementById(uId).setAttributeNS(null, 'fill', fill);
        }
      </script>
    </head>
    <body>
      <div>
        <input type="button" value="test" onclick="setUsedFill('uc1', 'yellow');"/>
        <input type="button" value="test" onclick="setUsedFill('uc2', 'red');"/>
      </div>
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
          <defs>
            <!-- set the fill in the def to "inherit" -->
            <circle id="c1" cx="50" cy="50" r="30" fill="inherit"/>
          </defs>
          <use id="uc1" x="0" y="0" xlink:href="#c1" fill="green"></use>
          <use id="uc2" x="100" y="100" xlink:href="#c1" fill="green"></use>
        </svg>
      </div>
    </body>
  </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...