#html #css #svg
#HTML #css #svg
Вопрос:
Я попытался сделать так, чтобы область просмотра SVG занимала 100% ширины и высоты страницы здесь:
Однако, похоже, он появляется только тогда, когда я изменяю это:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" id="city">
К этому (размер области просмотра):
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1400 1400" enable-background="new 0 0 1400 1400" xml:space="preserve" id="city">
Насколько я понимаю, это 100 означало, что он занимал весь процент области просмотра, так почему же тогда он отображается на странице?
Ответ №1:
viewBox="0 0 100 100"
Проще говоря viewbox , определяет ограничения системы координат вашего SVG…it не имеет ничего (на самом деле) общего с размерами элемента в HTML, которые вы можете задать либо в самом SVG, либо в вашем CSS.
Изменяя viewbox то, что вы фактически говорите, я хочу видеть только верхний левый раздел 100×100 моего SVg размером 1400×1400.
РЕДАКТИРОВАТЬ: демонстрация JSfiddle
с оригинальным полем просмотра 1400 и любыми размерами CSS.
Ответ №2:
Номера полей просмотра обозначают пиксели, а не проценты. Если вы хотите охватить весь контейнер, вы должны установить ширину и высоту элементов SVG равными 100%
используйте это вместо:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="100%" y="100%" xml:space="preserve" id="city">
вот скрипка: http://jsfiddle.net/t5rhp /
Комментарии:
1. Спасибо за помощь. Проблема в том, что он не закреплен внизу, как это было раньше. Я пытался сделать так, чтобы он был выровнен по низу и расширен вверх. Поскольку это здания, вы, вероятно, можете представить, как нижняя часть здания должна начинаться внизу страницы. Как мне вернуть это выравнивание, пожалуйста?
2. Посмотрев на это подробнее, это кажется неправильным. Изображение падает со страницы, а не масштабируется, чтобы поместиться на странице
3. Я думаю, это потому, что в jsfiddle скрыт какой-то контейнер. Я попробовал это на личной странице, и все в порядке. То же самое происходит с copeden: http://codepen.io/anon/pen/ovmlu
4. Спасибо. Однако проблема в том, что на моем экране вообще не отображаются здания, предположительно потому, что они масштабируются в зависимости от направления X. Есть ли какой-либо способ убедиться, что он всегда соответствует всей высоте (направление y) SVG в? Он действительно должен показывать все здания.
5. Я думаю, проблема в том, что я хочу, чтобы он масштабировался, чтобы сделать его как можно больше, но при этом умещался в окне и не терял соотношение сторон
Ответ №3:
вы viewBox также должны определить атрибут. Кроме того, вы также можете использовать Preserving Aspect Ratio .
svg {
width:100%;
height:100%;
}
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid none">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Комментарии:
1. У меня уже есть проценты в CSS, и добавление
perserveaspectratiosvg, похоже, ничего не меняет в моей скрипке2. извините, изначально я не видел вашу скрипку. Я добавил круг SVG и его отображение. проверьте ДЕМОНСТРАЦИЮ jsfiddle.net/XZ57u/4 . Дайте мне знать, если я уловлю точную точку.
3. Хорошо, но круг SVG не является примером, который я использую в вопросе, поэтому я действительно не знаю, исправляет это или нет. Это городской пейзаж, который я пытаюсь использовать
4. Мне нужно было бы больше времени, чтобы посмотреть на это.. я увижу вашу скрипку, а затем поделюсь своими мыслями
5. Я думаю, проблема в том, что я хочу, чтобы он масштабировался, чтобы сделать его как можно больше, но при этом умещался в окне и не терял соотношение сторон