HTML SVG как фон с немасштабированным, выровненным по правому краю контентом - PullRequest
Новая
       51

HTML SVG как фон с немасштабированным, выровненным по правому краю контентом

0 голосов
/ 31 октября 2018

Какие части конфигурации? Насколько я это проверил, вот что я определил: - фоновое изображение тела должно быть установлено в SVG - изменение размера фона тела - чтобы заполнить фон, я попробовал 100% 100% - атрибут тега svg viewBox должен содержать исходные значения, чтобы определить пропорции? атрибуты ширины и высоты svg ничего не делают? атрибут sserve preserveAspectRatio не делает Anthing? - объект контента svg ... ну, я не знаю, как выровнять его по правому краю

Пока фон все еще масштабируется, а контент остается в центре. Есть ли какая-то мудрость в этом вопросе? 

html,body {
  min-height: 100vh;
  min-width: 100%;
  color: white;
}

body {
  background: no-repeat;
  background-size: 100% 100%;
  background-image: 
        url("data:image/svg+xml;utf8,<svg width='100%' height='100%' 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 366 768'  xml:space='preserve'><rect x='260' style='fill:lime' y='257' width='229' height='142'/></svg>");
}

контрольный пример на jsfiddle

Спасибо, ребята

редактирование: Содержание не должно масштабироваться, но основная область SVG должна. Содержимое всегда выровнено по правому краю.

...