製作自己的響應式SVG圖形和信息圖表

利用響應式SVG的力量：通過代碼級控件增強用戶體驗

>本文探討瞭如何通過直接操縱其標記來創建更快且用戶友好的可擴展向量圖形（SVG）。 我們將利用文本編輯器和codepen.io的HTML面板進行實驗。

提高SVG清潔度和效率

對於清潔劑，更緊湊的SVG，重複的內聯屬性應重構為CSS類，反映HTML的最佳實踐。這可以提高可讀性，減少文件大小並啟用集中樣式管理。 例如，考慮以下重複

元素：<text></text>

<text> y="430" x="40" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1960>
<text> y="430" x="118" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1965>
<text> y="430" x="196" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1970>

可以使用

<> a節的CSS類簡化這些：> <defs>

.y-axis text {
    text-anchor: middle;
    fill: rgb(103, 102, 102);
    font-size: 12px;
}

元素，然後變為：

> <text>

這種方法可顯著增強代碼可維護性並減少文件大小。 類似的技術可以應用於其他重複元素。

<text class="y-axis" y="430" x="40">1960</text>
<text class="y-axis" y="430" x="118">1965</text>
<text class="y-axis" y="430" x="196">1970</text>

>使用CSS媒體查詢創建響應式SVG

利用CSS媒體查詢使SVG響應不同的屏幕尺寸。 這對於維持各種決議的可讀性至關重要。 例如，根據屏幕寬度調整字體尺寸：

這可以確保即使在較小的屏幕上，文本也可以清晰。 進一步的增強功能，例如在媒體查詢中使用

@media (max-width: 500px) {
    .label-startrek, .label-starwars {
        font-size: 170%;
    }
    .y-axis text, .x-axis text {
        font-size: 130%;
    }
}

或

有條件隱藏元素，可以在較小的斷點下提高佈局和可讀性。 選擇器為靶向特定元素提供了一種更優雅的方法。 display: none;opacity: 0; :nth-of-type

超出基本響應

>響應式SVG不僅適應屏幕大小，而且適應其在佈局中的位置。 它們可以動態調整大小以填充可用空間，使其非常適合交互式元素和動態內容。 這允許創建適應性的縮略圖或交互式圖表，以根據可用空間調整其詳細信息級別。

結論

通過採用代碼級控制並利用CSS技術，SVG可以轉變為響應迅速和用戶友好的組件。 使用Codepen.io和文本編輯器實驗是探索這些技術並創建動態，適應性圖形的有力方法。 請記住將您的最終CSS納入SVG的

部分，以進行獨立的，可維護的文件。

以上是製作自己的響應式SVG圖形和信息圖表的詳細內容。更多資訊請關注PHP中文網其他相關文章！