制作自己的响应式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></defs>

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

元素，然后变为：

> <text></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中文网其他相关文章！