SVG: строка с атрибутом y, выраженная в процентах, не зависит от viewBox - PullRequest
Новая
       44

SVG: строка с атрибутом y, выраженная в процентах, не зависит от viewBox

0 голосов
/ 10 сентября 2018

Кажется, что указание координат линии SVG-линии в процентах делает эту координату существующей в системе координат видового экрана вместо пользовательской системы координат, установленной viewBox. Для меня это звучит странно, особенно после прочтения спецификации. В приведенном ниже примере зеленая линия определяется координатами пространства пользователя, а координата y синей линии выражена в процентах (50%). Когда кнопка нажата, viewBox применяется - зеленая линия масштабируется правильно, а синяя линия отсутствует ... Что там происходит?
spec говорит: Для любого значения координаты y или значения высоты, выраженного в процентах от области просмотра SVG, используемое значение должно быть процентом, в пользовательских единицах, от параметра высоты элемента viewBox, примененного к этому окну просмотра. Если viewBox не указан, то используемое значение должно быть в процентах, в пользовательских единицах, от высоты области просмотра SVG.

ОБНОВЛЕНИЕ: я сгруппировал все элементы в svg и предоставил transform = "scale (0.5 0.5)", и процентная координата работала как ожидалось. Я начинаю подозревать, что viewBox преобразует только координаты, указанные в пользовательских единицах, а не в явных единицах. Но я бы подумал, что процент не следует рассматривать как явную единицу, поскольку это не совсем физическая ценность. И это противоречило бы отрывку спецификации сверху. Так что же это? 

function myFunction(){
 document.getElementById("maxi").setAttribute("viewBox","0,0,492,124");

} 
<svg id="maxi" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px"  width="246" height="62" font-size="23px" xml:space="preserve" >

			<line id="greenline" x1="0" y1="31" x2="232" y2="31" stroke="#00FF00" stroke-width="4"/>
      <line id="blueline" x1="0" y1="50%" x2="232" y2="50%" stroke="#0000FF"/>

            <path class="cutContour" fill="none" stroke="#EC008C" stroke-miterlimit="3.8637" d="M6.8,2.3H225
				c2.3,0,4.3,1.9,4.3,4.3v48.2c0,2.3-1.9,4.3-4.3,4.3H6.8c-2.3,0-4.3-1.9-4.3-4.3V6.6C2.5,4.2,4.4,2.3,6.8,2.3z"/>

</svg>
<input type="button" value="Click Me" onClick="myFunction();">

1 Ответ

0 голосов
/ 10 сентября 2018

Я не вижу ничего необычного в поведении, которое вы описываете. См. Codepen на https://codepen.io/MSCAU/pen/JapPQd.

Синяя линия остается в (вертикальном) центре SVG, поскольку ее Y-координаты выражены как 50%. Когда viewBox изменяет значение, это не затрагивается. Только его значения X выражены в абсолютных терминах, поэтому строка становится наполовину, когда viewBox сделан явным.

Зеленая линия смещается по осям X и Y при нажатии кнопки при изменении системы координат - в вашем примере это удвоение - и ее координаты выражаются в абсолютных единицах.

Я изменил цвета и ширину штриха, чтобы было понятнее, что происходит. Я также закомментировал ваш PATH и поставил (пунктирную) границу вокруг SVG для ясности. Я также добавил удобную кнопку сброса: 

function reset() {
  document.getElementById("maxi").removeAttribute("viewBox");
}
...