SVG-граница отключена при определенной ширине

У меня есть две графики SVG, которые используют относительную ширину для определения размера (20% их контейнера). Когда я изменяю размер, делая окно больше или меньше, левая граница SVG обрезается с определенной шириной.SVG-граница отключена при определенной ширине

EDIT: По предложению Роберта Лонгсона я подрезал разметку только до границы.

Вот рабочий пример: http://codepen.io/anon/pen/xVjjaG

Код:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="-321 591 148 44" style="enable-background:new -321 591 148 44;width:20%;" xml:space="preserve" class="apple_svg"> 
    <style type="text/css"> 
    .st0{fill-rule:evenodd;clip-rule:evenodd; } 
    </style> 
    <g id="Layer_1"> 
    <g> 
     <path d="M-177.7,634.5h-138.5c-2.6,0-4.7-2.1-4.7-4.7v-33.6c0-2.6,2.1-4.7,4.7-4.7h138.5c2.6,0,4.7,2.1,4.7,4.7l0,33.6 
       C-173,632.4-175.1,634.5-177.7,634.5z M-316.3,592.5c-2.1,0-3.7,1.7-3.7,3.7v33.6c0,2,1.7,3.7,3.7,3.7h138.5 
       c2.1,0,3.7-1.7,3.7-3.7l0-33.6c0-2.1-1.7-3.7-3.7-3.7H-316.3z"/> 
    </g> 
    </g> 
</svg>

Это то, что он выглядит, когда он отрезал:

И вот как это должно выглядеть (и при определенных ширинах):

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

источник

2016-04-17 SFBA26

Возможно, вы можете сократить разметку до границы, поэтому нам не нужно выяснять, какой путь это? –

Попробуйте сделать границу шириной 2 пикселя в вашем программном обеспечении для рисования. затем реэкспортируйте в Svg и повторите попытку. – wawawoom

Справедливая точка @ RobertLongson, я подрезал ее до границы. – SFBA26

При проверке кода в Chrome я заметил добавление этого стиля (не мной):

svg:not(:root) { 
    overflow: hidden; 
}

Я попытался изменить overflow: hidden; к overflow: visible; и SVG больше не обрезаются.

Добавление

svg:not(:root) { 
    overflow: visible; 
}

в моем стиле листа устраняет проблему, но я до сих пор не понимаю, почему SVG переполнена в первую очередь.

Поскольку это действительно более обходное решение, чем решение, я оставлю этот ответ непринятым в надежде, что кто-то сможет объяснить истинную первопричину.

источник

2016-04-17 23:41:45 SFBA26

Ваш путь будет вне Viewbox, самое простое решение, следовательно, сделать Viewbox немного больше т.е.

viewBox="-322 591 150 44"

Здесь я расширил его немного влево, а также вправо (за счет увеличения его ширина больше, чем сумма, которую я уменьшил x), поскольку я обнаружил, что правый край тоже был разрезан.

источник

2016-04-18 06:06:00

SVG-граница отключена при определенной ширине

ответ

Смежные вопросы