Я делаю страницу, на которой будет отображаться SVG-образ, и вот требования:
- вектор должен занимать все окно
- вектор должен поддерживать соотношение сторон (определенное в самом файле SVG)
- вектор должен обрезать/обрезать, чтобы предотвратить перекос
CSS...
body {
background: url(/path/to/image.svg);
background-size: cover;
}
... работает почти отлично, за исключением того, что, когда окно браузера становится слишком узким, оно не использует обрезку/обрезку.
Вот несколько снимков экрана (пожалуйста, игнорируйте артефакты, оставленные dabblet):
Здесь окно близко к соотношению сторон исходного изображения
Здесь окно "короче", чем соотношение сторон, и изображение обрезается (по желанию).
Здесь окно "уже", чем соотношение сторон, но вместо обрезки изображение черепично (нежелательно).
Вот некоторые мысли, которые у меня были...
- Можно ли каким-либо образом изменить изображение SVG, чтобы это не произошло?
- Могу ли я разметку/стиль страницы для достижения желаемых результатов?
- Я бы предпочел сохранить в области HTML/CSS, но если нужен Javascript, то так-бы-он.
Здесь dabblet, с которым я работал... http://dabblet.com/gist/6033198