如何根據瀏覽器寬度更改 SVG？

Question

我正在尋找根據瀏覽器寬度動態更改 svg 形狀的最佳方法。 將寬度設置為 100% 會拉伸形狀以跟隨瀏覽器的寬度，但它也會縮放或扭曲形狀......我追求的是：草圖

是否可以使用 Javascript 或有更好的方法來做到這一點？ HTML畫布？ 謝謝！

Answer 1

當您采用涉及 SVG 的替代方法時，這里有一個。 不幸的是，我不會說它比使用畫布更容易。

無論如何 - 為了能夠獨立地拉伸形狀的一部分，我們實際上需要將該形狀一分為二。 這樣左邊的部分可以保持靜止。

如果我們看一下您所追求的形狀：

我們可以很容易地看到有一個四分之一圓

和一個正確的梯形

使用繪圖命令構建它們是相當簡單的 - 只是將它們並排放置並不能完成這項工作。

這里的技巧是使四分之一圓具有固定大小 - 例如 80 x 80 像素 - 並且根本不給梯形一個大小。 相反，我們需要使用形狀的 URL 填充普通<div>元素的 CSS background-image屬性。 這也可以在線完成。 要使其拉伸到瀏覽器窗口，我們需要使其寬度為剩余空間的 100% - 這可以通過將元素的overflow屬性設置為hidden 。 現在只需使背景的高度等於四分之一圓的高度並將background-repeat屬性設置為no-repeat 。

現在瀏覽器將背景圖像拉伸到靜態四分之一圓旁邊的剩余寬度和固定的 80 像素高度。

下面是一個例子：

 .svgB { overflow: hidden; background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 5 5' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><polygon points='0,0 5,0 5,2.5 0,5' style='fill:grey;'/></svg>"); background-repeat: no-repeat; background-size: 100% 80px; } .svgB>* { color: white; padding-left: 5px; } .svgA { float: left; width: 80px; height: 80px; }

 <div class="svgA"> <svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg"> <path fill="black" d="M5,5 a5,5 0 0,1 -5,-5 L5,0" /> </svg> </div> <div class="svgB" style="height:80px;"> <p>Here's some text</p> </div>