我需要一个SVG图像的东西像图像波纹管(开门建筑符号),将调整大小的比例,但在绿色和红色的宽度将保持不变。颜色和大小只是为了说明的目的。
我做了尝试与此代码下面,但不知道如何使绿色的高度和红色的宽度是固定的,当图像大小调整。
如果你能帮上忙,非常感谢你的时间!
<svg id="imgsvg" width="400px" height="400px" version="1.0" state='normal'
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- The left head -->
<svg class="head input-source" id="left"
height="100%"
width="100%"
viewBox="0 0 10 200"
preserveAspectRatio="xMinYMax"
>
<rect
width="100%"
height="100%"
stroke='black'
stroke-width='0'
fill="#000"
/>
</svg>
<!-- The bottom head -->
<svg class="head input-source" id="bottom"
height="100%"
width='100%'
viewBox="0 0 200 20"
preserveAspectRatio="xMinYMax"
>
<rect
width="100%"
height="100%"
stroke='gray'
stroke-width='0'
fill="gray"
/>
</svg>
</defs>
<!-- The Quad -->
<svg class='head input-source' id="quad"
height="100%"
width='100%'
viewBox="0 0 200 200"
preserveAspectRatio="xMinYmax"
>
<path
d="M0,1 Q199,0 199,199"
fill="#ffffff"
fill-opacity="0"
stroke="#000000"
stroke-width="2"
/>
</svg>
<use xlink:href='#left'/>
<use xlink:href='#bottom'/>
</svg>
我解决了我的问题贝娄是更新代码笔
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdKLYZp" data-user="Zoki-Poki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/Zoki-Poki/pen/mdKLYZp">
Untitled</a> by Zoki Poki (<a href="https://codepen.io/Zoki-Poki">@Zoki-Poki</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
2条答案
按热度按时间2ic8powd1#
如果SVG是内联的,你可以在CSS中使用和HTML页面其他部分相同的长度和单位。这里你有三个相同的SVG。唯一的区别是它们包含在不同大小的
<div>
中。你可以看到橙子矩形在三个中保持相同的“宽度”。第一个
2sbarzqh2#
我解决了我的问题在底部是更新代码笔