Окно просмотра с использованием символа отличается от окна просмотра с использованием базовой формы - PullRequest
Новая
       63

Окно просмотра с использованием символа отличается от окна просмотра с использованием базовой формы

0 голосов
/ 26 апреля 2019

Я пытаюсь понять viewBox, используя круг для тестирования. У меня есть два теста, и для каждого у меня есть два способа тестирования. Первый тест использует viewBox 0 0 30 30, который должен показывать верхний левый угол круга. Во втором тесте используется viewBox 30 30 30 30, который должен показывать нижний правый угол круга. Если я создам кружок SVG напрямую, оба теста будут работать так, как задумано. Если я помещу кружок внутри символа, первый тест работает, но второй тест ничего не показывает. 

var NS = 'http://www.w3.org/2000/svg';
var xlink = 'http://www.w3.org/1999/xlink';

// svg definitions
var svg_defs = document.createElementNS(NS, 'svg');
document.body.appendChild(svg_defs);
svg_defs.style.width = '0px';
svg_defs.style.height = '0px';

// svg circle definition
var circ1 = document.createElementNS(NS, 'circle');
svg_defs.appendChild(circ1);
circ1.id = 'circ1';
circ1.setAttributeNS(null, 'cx', 30);
circ1.setAttributeNS(null, 'cy', 30);
circ1.setAttributeNS(null, 'r', 30);
circ1.setAttributeNS(null, 'fill', 'lightgreen');

// svg symbol definition with circle
var sym = document.createElementNS(NS, 'symbol');
svg_defs.appendChild(sym);
var circ2 = document.createElementNS(NS, 'circle');
sym.appendChild(circ2);
sym.id = 'circ2';
circ2.setAttributeNS(null, 'cx', 30);
circ2.setAttributeNS(null, 'cy', 30);
circ2.setAttributeNS(null, 'r', 30);
circ2.setAttributeNS(null, 'fill', 'lightblue');

// div using viewBox(0 0 30 30)
var div_a = document.createElement('div');
document.body.appendChild(div_a);

// svg for circle definition
var svg1a = document.createElementNS(NS, 'svg');
div_a.appendChild(svg1a);
svg1a.style.margin = '20px';
svg1a.style.border = '1px solid black';
svg1a.setAttributeNS(null, 'width', 30);
svg1a.setAttributeNS(null, 'height', 30);
svg1a.setAttributeNS(null, 'viewBox', '0 0 30 30');

// attach circle definition
var u1a = document.createElementNS(NS, 'use');
u1a.setAttributeNS(xlink, 'xlink:href', '#circ1')
svg1a.appendChild(u1a);

// svg for symbol definition
var svg2a = document.createElementNS(NS, 'svg');
div_a.appendChild(svg2a);
svg2a.style.margin = '20px';
svg2a.style.border = '1px solid black';
svg2a.setAttributeNS(null, 'width', 30);
svg2a.setAttributeNS(null, 'height', 30);
svg2a.setAttributeNS(null, 'viewBox', '0 0 30 30');

// attach symbol definition
var u2a = document.createElementNS(NS, 'use');
u2a.setAttributeNS(xlink, 'xlink:href', '#circ2')
svg2a.appendChild(u2a);

// div using viewBox(30 30 30 30)
var div_b = document.createElement('div');
document.body.appendChild(div_b);

// svg for circle definition
var svg1b = document.createElementNS(NS, 'svg');
div_b.appendChild(svg1b);
svg1b.style.margin = '20px';
svg1b.style.border = '1px solid black';
svg1b.setAttributeNS(null, 'width', 30);
svg1b.setAttributeNS(null, 'height', 30);
svg1b.setAttributeNS(null, 'viewBox', '30 30 30 30');

// attach circle definition
var u1b = document.createElementNS(NS, 'use');
u1b.setAttributeNS(xlink, 'xlink:href', '#circ1')
svg1b.appendChild(u1b);

// svg for symbol definition
var svg2b = document.createElementNS(NS, 'svg');
div_b.appendChild(svg2b);
svg2b.style.margin = '20px';
svg2b.style.border = '1px solid black';
svg2b.setAttributeNS(null, 'width', 30);
svg2b.setAttributeNS(null, 'height', 30);
svg2b.setAttributeNS(null, 'viewBox', '30 30 30 30');

// attach symbol definition
var u2b = document.createElementNS(NS, 'use');
u2b.setAttributeNS(xlink, 'xlink:href', '#circ2')
svg2b.appendChild(u2b);

См. Эту скрипку JS - https://jsfiddle.net/0scrgh4x/

1 Ответ

1 голос
/ 26 апреля 2019

Я добавил style="overflow:visible" к символу. 

<svg style="width: 0px; height: 0px;">
<symbol id="circ2"  viewBox="0 0 30 30" style="overflow:visible">
    <circle cx="30" cy="30" r="30" fill="lightblue"></circle>  </symbol>
</svg>


 <svg width="30" height="30" viewBox="30 30 30 30" style="margin: 20px; border: 1px solid black;">
 <use xlink:href="#circ2"></use>
  
  </svg>

ОБНОВЛЕНИЕ

Альтернативное решение, где <symbol> имеет viewBox="0 0 60 60".Поскольку символ имеет размер круга, нет необходимости в style="overflow:visible"

svg{border:1px solid}
<svg viewBox="0 0 60 60" width="0" >
  <symbol id="circ2" viewBox="0 0 60 60" >
    <circle cx="30" cy="30" r="30" fill="lightblue"></circle>
  </symbol>
  <use xlink:href="#circ2" x="0" y="0"></use>
</svg>

<svg width="30" height="30" viewBox="0 0 30 30" >
 <use xlink:href="#circ2"  width="60" height="60"></use>
</svg>

<svg width="30" height="30" viewBox="30 30 30 30" >
 <use xlink:href="#circ2"  width="60" height="60"></use>
</svg>
...