jQuery: клонировать и вырезать часть изображения SVG на отдельном DIV - PullRequest
Новая
       25

jQuery: клонировать и вырезать часть изображения SVG на отдельном DIV

0 голосов
/ 10 мая 2018

У меня есть изображение SVG, определяющее красный квадрат, оранжевый круг и зеленый круг:

enter image description here

Цель состоит в том, чтобы показать на отдельномразделить часть / клип изображения (от пикселя 50,50 до 100,100, например, чтобы выделить только область зеленого круга) с коэффициентом масштабирования, но я не знаю, как переназначить значения 'viewBox': 

<svg width='200' height='200' id='main' viewBox='0 0 100 100'>
  <rect x='10' y='10' width='80' height='80' fill='red'></rect>
  <circle cx='25' cy='25' r='25' fill='orange'></circle>
  <circle cx='75' cy='75' r='25' fill='green'></circle>
</svg>
<div id='portion'></div>

JsFiddle 

<script type='text/javascript'>
svgclone = $('#main').clone();

svgclone.width(50);
svgclone.height(50);
$('#portion').html(svgclone);
</script>

Есть ли какой-нибудь трюк или обходной путь, чтобы показать конкретную часть (не начиная с происхождения 0,0) нативного SVG в отдельном контейнере?

1 Ответ

0 голосов
/ 10 мая 2018

jQuery .attr() преобразует имена атрибутов в нижний регистр, делая viewbox из viewBox.Вместо этого используйте общий .setAttribute(): 

svgclone.get(0).setAttribute('viewBox', '50 50 50 50')
...