2016-06-08 2 views
0

привета вот мой код,как назначить ребенок ширину элемента к родительскому элементу

<!DOCTYPE html> 
<html> 
<body> 

<svg width="500" height="100"> 
    <rect width="300" height="100" style="fill:green;stroke-width:3;stroke:gray"> 
</svg> 

</body> 
</html> 

когда я инспектировать элемент, занимаемый 500px SVG из я поставил внутренне 500px к этому элементу SVG. однако мне нужно, он должен быть занят только шириной дочернего элемента, которая составляет 300 пикселей.

Примечание: без замены ширины svg (500 пикселей) и без назначения 300 пикселей на этот элемент.

+0

Просто удалите фиксированную ширину для ... – DaniP

+0

SVG без удаления ширины, как достичь? –

+0

Вы могли бы использовать max-width для svg? –

ответ

0

Вы можете использовать viewBox, чтобы отображать только ту часть чертежа, которую вы хотите.

По умолчанию соотношение сторон будет сохранено, но я переопределил это ниже, чтобы получить ширину 500. Я не уверен, какая ценность preserveAspectRatio будет наиболее подходящей для вас, поэтому вам может понадобиться экспериментировать с разными значениями.

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<svg width="500" height="100" viewBox="0 0 300 100" preserveAspectRatio="none"> 
 
    <rect width="300" height="100" style="fill:green;stroke-width:3;stroke:gray"/> 
 
</svg> 
 

 
</body> 
 
</html>

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