82 lines
1.6 KiB
HTML
82 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
background: yellow;
|
|
width: 75px;
|
|
height: 75px;
|
|
}
|
|
svg {
|
|
background: lime;
|
|
}
|
|
svg.intrinsic-size {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
rect {
|
|
fill: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<svg class='intrinsic-size' width='100' height='100'>
|
|
<rect width='50%' height='50%'/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<svg width='100' height='100'>
|
|
<style>
|
|
svg {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
<rect width='50%' height='50%'/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<svg class='intrinsic-size' width='100' height='100'>
|
|
<svg viewbox='0 0 100 100'>
|
|
<rect width='50%' height='50%'/>
|
|
</svg>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<svg class='intrinsic-size' width='100' height='100'>
|
|
<svg class='intrinsic-size' viewbox='0 0 100 100'>
|
|
<rect width='50' height='50'/>
|
|
</svg>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<svg class='intrinsic-size' width='100' height='100'>
|
|
<svg class='intrinsic-size' width='50%' height='50%' viewbox='0 0 100 100'>
|
|
<rect width='100%' height='100%'/>
|
|
</svg>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<svg class='intrinsic-size' width='100' height='100'>
|
|
<svg width='50%' height='50%' viewbox='0 0 100 100'>
|
|
<rect width='100' height='100'/>
|
|
</svg>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<svg width='100' height='100'>
|
|
<style>
|
|
svg {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
<svg width='50%' height='50%' viewbox='0 0 100 100'>
|
|
<rect width='100' height='100'/>
|
|
</svg>
|
|
</svg>
|
|
</div>
|
|
</body>
|
|
</html>
|