Я борюсь с одним из моих SVG, где пока я просто заполняю его серым прямоугольником solid. Прямоугольник отлично заполняется по вертикали, но по горизонтали он не заполняет все пространство:
Вот фрагмент из моего html:
<div class="col-9 sh-input">
<svg viewBox="0 0 1000 100" width="100%" height="40px">
<rect x="0" y="0" width="1000" height="100" fill="#333"/>
</svg>
</div>
Чтобы прямоугольник фактически заполнял весь вид, в настоящее время мне нужно изменить x на ~ -100 и ширину на ~ 1200.
Я прошел через все стили, чтобы посмотреть, может ли что-нибудь там быть причиной, но не повезло, и я не делаю никаких нестандартных стилей для svgs на данный момент. Кроме того, поскольку ширина svg определяется в процентах, а высота в пикселях, я подумал, может ли это быть фактором, но изменение svg width = "475px" по-прежнему дает тот же результат.
Так что сейчас я немного озадачен, тем более что я использовал почти этот точный код в других частях моего приложения без тех же проблем. Если кто-нибудь сможет указать, какую глупую ошибку я совершаю, я буду бесконечно благодарен!