Процентная координата SVG выключена - PullRequest
Новая
       25

Процентная координата SVG выключена

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

У меня есть три SVG, вложенных в другой SVG. Первый должен быть плавным и вытянутым, поэтому preserveAspectRatio равно none. Два других установлены на 10% и 90% для значения x. Но если вы измените размер страницы, вы увидите, что они имеют разное расстояние с левой и правой стороны. Почему?

Я ожидаю увидеть левое расстояние на таком же расстоянии от левого, как и правое с расстоянием справа. 

.box {
  width: 60vw;
  border: 1px dashed lightgray;
}

svg {
  overflow: visible;
}
<div class="box">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50">
    
    <svg viewBox="0 0 2 2" preserveAspectRatio="none">
      <rect x="0" width="2" height="1" fill="#DDDDDD" />
    </svg>

    <svg x="10%" viewBox="0 0 20 20" preserveAspectRatio="xMinYMid">
      <rect x="0" y="0" width="10" height="10" fill="#7FDBFF" />
    </svg>

    <svg x="90%" viewBox="0 0 20 20" preserveAspectRatio="xMinYMid">
      <rect x="0" y="0" width="10" height="10" fill="#7FDBFF" />
    </svg>
    
  </svg>
</div>

Ответы [ 3 ]

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

Для всех, кто так запутался, как я, вот проблема:

screen

Если я установлю значение viewBox x равным половинеширина 10 / 2 = 5, затем я технически сдвинул начало координат к центру ширины. 

.box {
  width: 60vw;
  border: 1px dashed lightgray;
}

svg {
  overflow: visible;
}
<div class="box">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50">
    
    <svg viewBox="0 0 2 2" preserveAspectRatio="none">
      <rect x="0" width="2" height="1" fill="#DDDDDD" />
    </svg>

    <svg x="10%" viewBox="5 0 20 20" preserveAspectRatio="xMinYMid">
      <rect x="0" y="0" width="10" height="10" fill="#7FDBFF" />
    </svg>

    <svg x="90%" viewBox="5 0 20 20" preserveAspectRatio="xMinYMid">
      <rect x="0" y="0" width="10" height="10" fill="#7FDBFF" />
    </svg>
    
  </svg>
</div>
0 голосов
/ 15 мая 2018

Вот еще одно решение.

Два синих SVG идентичны, кроме атрибутов preserveAspectRatio. 

.box {
  width: 60vw;
  border: 1px dashed lightgray;
}

svg {
  overflow: visible;
}
<div class="box">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50">
    
    <svg viewBox="0 0 2 2" preserveAspectRatio="none">
      <rect x="0" width="2" height="1" fill="#DDDDDD" />
    </svg>

    <svg x="10%" width="80%" height="100%" viewBox="0 0 10 20" preserveAspectRatio="xMinYMid">
      <rect x="0" y="0" width="10" height="10" fill="#7FDBFF" />
    </svg>

    <svg x="10%" width="80%" height="100%" viewBox="0 0 10 20" preserveAspectRatio="xMaxYMid">
      <rect x="0" y="0" width="10" height="10" fill="#7FDBFF" />
    </svg>

  </svg>
</div>
0 голосов
/ 15 мая 2018

Потому что вы начинаете рисовать вторую синюю клетку на 90%, когда вы действительно хотите закончить ничью на 90%.Исправьте это, установив viewBox второго синего поля на: 

viewBox="20 0 20 20"
...