Выберите ширину SVG, используя jQuery? - PullRequest
Новая
       0

Выберите ширину SVG, используя jQuery?

3 голосов
/ 09 декабря 2011

Мне нужно иметь возможность выбирать ширину и высоту элемента svg внутри элемента embed с помощью jQuery.Обратите внимание, что он должен быть внутри элемента встраивания, если это имеет значение для ответа.

Я пробовал это как тест, но он возвращает undefined: 

var width = $('embed:first').children("svg:first").attr("width");
alert(width);

Позже, когда я получаючтобы это работало, я собираюсь использовать .each, так что это только для тестирования.

Некоторые поиски в Google, кажется, предполагают, что svg не может быть так легко выбран таким способом.Может кто-нибудь объяснить, как именно это сделать вместо этого?Если мне нужно использовать плагин jQuery SVG, не могли бы вы объяснить использование для достижения вышесказанного, потому что я не мог получить это из примеров на сайте.

ОБНОВЛЕНИЕ: Обратите внимание, что svg встроен вэлемент для встраивания с атрибутом src: 

<embed class="image" width="100%" height="100%"
               src="svgimage.svg"
                        ></embed>

1 Ответ

4 голосов
/ 09 декабря 2011

Просто скачайте jquery.svg.js и загрузите его с элементом script после jQuery: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src='/js/jquery.svg.js'></script>

Чтобы получить элемент SVG: 

var svg   = document.querySelector('embed').getSVGDocument().documentElement;
var width = svg.getAttributeNS(null, 'width');
console.log(width);

Чтобы получить все embed, используйте document.querySelectorAll('embed').

Полный пример (должен быть запущен на сервере / локальном хосте, локальный файл не будет работать): 

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src='jquery.svg.js'></script>
  </head>
  <body>
    <embed src="circle1.svg" type="image/svg+xml">
    <embed src="circle2.svg" type="image/svg+xml">

    <script>
      (function () {
        var embeds, embed, i, onSvgLoaded;

        onSvgLoaded = function () {
          var $svg;

          $svg  = $( this.getSVGDocument().documentElement );
          width = $svg.attr('width');
          console.log('Width:', width);
        };

        embeds = document.querySelectorAll('embed');

        for (i=0; embed=embeds[i]; i++) {
          embed.addEventListener('load', onSvgLoaded);
        }

      })();
    </script>
  </body>
</html>

circle1.svg: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="red"/>
</svg>

circle2.svg: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
  <circle cx="100" cy="100" r="100" fill="red"/>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...