svg中path图形自适应_制作自己的自适应SVG图形和图表

svg中path图形自适应

A few weeks ago I talked about making this Star Trek vs. Star Wars chart in SVG using the free Boxy SVG vector editor.

几周前，我谈到了使用免费的Boxy SVG矢量编辑器在SVG中制作这张《星际迷航》与《星球大战》图表的方法。

We also talked about the power of clean, well-written SVG. I want to take that idea a step further today. I know this is the design and UX channel, but sometimes to design something better, we need to take ‘code-level’ control. We’re going to poke around in the SVG markup but there will be a worthwhile design payoff.

我们还讨论了干净，编写良好的SVG的功能。我今天想把这个想法更进一步。我知道这是设计和UX通道，但是有时要设计更好的东西，我们需要采取“代码级”控制。我们将在SVG标记中进行讨论，但是会有一笔值得的设计收益。

One of the best ways I’ve found to experiment with SVG is to:

我发现尝试SVG的最佳方法之一是：

Draw something simple in Boxy SVG and save it, 在Boxy SVG中绘制简单的内容并保存，
Open that SVG file in your favorite text editor (Brackets, Atom, Sublime, whatever)

在您喜欢的文本编辑器( Brackets ， Atom ，Sublime等等)中打开该SVG文件。
Copy and paste that SVG code directly into the HTML panel at Codepen.io. It should render in the results panel.

将SVG代码直接复制并粘贴到Codepen.ioHTML面板中。它应该在结果面板中呈现。

From there you can start making changes and see what happens. Here’s my original Star Trek vs. Star Wars chart pasted into Codepen.

从那里您可以开始进行更改，然后看看会发生什么。这是粘贴到Codepen中的原始星际迷航与星球大战图表。

整齐的SVG是快乐的SVG ( Tidy SVGs are Happy SVGs)

Switching back to the code editor for a second, let’s look at the basic structure of our SVG chart. At the top, you’ll see a set of <defs> tags that contain reusable resources we call on later in this document – specifically you’ll see:

回到第二个代码编辑器，让我们看一下SVG图表的基本结构。在顶部，您将看到一组<defs>标记，其中包含我们将在本文档后面部分调用的可重用资源-特别是，您将看到：

a gray background gradient ‘glow’, and 灰色背景渐变“辉光”，以及
the grid pattern we use in the back我们在后面使用的网格图案

Beneath the <defs>, the rest of the document is fairly easy to follow.

在<defs>之下，该文档的其余部分相当容易理解。

A background rectangle (<rect>) with glow makes a backing canvas

具有辉光的背景矩形( <rect> )构成背景画布
The chart body with the grid pattern (<rect>)

具有网格图案的图表主体( <rect> )
The chart title (<text>)

图表标题( <text> )
The ‘Star Wars’ yellow chart line (<path>)

“星球大战”黄色图表线( <path> )
The ‘Star Trek’ blue chart line (<path>)

“星际迷航”蓝色图表线( <path> )
2 x labels for the chart lines (<text>)

图表线的2个标签( <text> )
A group (<g>) containing the y-axis number markers (<text>)

包含y轴数字标记( <text> )的组( <g> <text> )
A group (<g>) containing the x-axis number markers (<text>)

包含x轴数字标记( <text> )的组( <g> <text> )

There’s not a lot to it, right?

没什么，对不对？

But if you look closely at those two groups of axis numbers, you’re probably seeing a lot of repetition.

但是，如果仔细观察这两组轴编号，可能会发现很多重复。

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

If this was HTML we wouldn’t stand for this many repeated inline properties – we’d strip them out into the CSS and replace them with a class. There’s no reason not to do exactly the same in SVG.

如果这是HTML，我们将不代表这么多重复的内联属性–我们将它们剥离到CSS中，并用一个类替换它们。没有理由在SVG中不做完全相同的事情。

In <defs> section at the top of we already have <style> block. We can add a new CSS rule to that block like this:

在顶部的<defs>部分中，我们已经有<style>块。我们可以向该块添加新CSS规则，如下所示：

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

And that allows us to strip those text nodes down to something much more compact like this:

这样我们就可以将这些文本节点剥离为更紧凑的形式，如下所示：

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

Not only is this code MUCH easier to read and navigate through but it also makes the file smaller while allowing us to change the color of all the y-axis numbers from a single point. Win:win:win.

这不仅是代码更容易阅读和浏览过，但它也使文件更小，同时让我们所有的Y轴数字的颜色从单点变化。赢：赢：赢。

With the help of your code editor’s find-and-replace, you should be able to tidy up your file nicely. We can put the chart line label styling into the <style> too. We’ll create new CSS class and add it to the label text.

在代码编辑器的查找和替换的帮助下，您应该可以很好地整理文件。我们也可以将图表线标签样式放入<style> 。我们将创建新CSS类并将其添加到标签文本。

.label-starwars {
white-space: pre;
font-size: 15px;
fill: rgb(253, 200, 39);
word-spacing: 0px;
}

Be aware that you can’t move the ‘x’ and ‘y’ values of an SVG element into the CSS. But all other properties can be transferred to a class even including properties that aren’t in the CSS spec such as ‘fill’ or ‘stroke’ (as shown above).

请注意，您无法将SVG元素的“ x”和“ y”值移入CSS。但是所有其他属性都可以转移到类中，甚至包括CSS规范中未包含的属性(例如“ fill”或“ stroke”)(如上所示)。

Here’s that same SVG file tidied up with some new CSS classes.

这是用一些新CSS类整理的相同SVG文件。

But this article isn’t just about cleaning – let’s do something cooler and more useful with our chart.

但是本文不仅仅涉及清洁-让我们对图表进行更酷，更有用的操作。

制作更智能的SVG ( Making Smarter SVGs)

If there’s one benefit of SVG that is trumpeted the most, surely it is ‘scalability‘? After all, that IS what the ‘S‘ in ‘SVG’ stands for. We can effortlessly scale an icon from 40px to 400px and expect it to stay laser-sharp and crisp.

如果说SVG有一个最大的好处，那么肯定是“ 可扩展性 ”吗？毕竟，这是 “S”在“SVG”代表什么。我们可以毫不费力地将图标从40像素缩放到400像素，并期望它保持激光锐利和清晰。

But this has its limitations.

但这有其局限性。

It doesn’t matter how sharp text is if it’s too small to read.

如果文本太小而无法阅读，则文本的清晰度并不重要。

Just because I can scale down our chart to fit onto a smaller screen, doesn’t mean that it’s of any practical use at that size. It doesn’t matter how laser-sharp our labels are if they’re simply too small to read.

仅仅因为我可以按比例缩小图表以适合较小的屏幕，并不意味着它在该尺寸下具有任何实际用途。如果标签太小而无法阅读，那么激光标签的清晰度就无关紧要了。

As you can see above, the text quickly becomes illegible when we scale our chart below about 500 pixels wide.

正如您在上面看到的，当我们将图表缩放到大约500像素以下时，文字很快变得难以辨认。

我们可以解决吗？响应式SVG可以！ ( Can we fix it? Responsive SVG can!)

In HTML and CSS, we would tackle this kind of problem with CSS media queries – which is exactly what we’ll do in our SVG. We spent time CSS-ifying our SVG and now we reap the benefits.

在HTML和CSS中，我们将通过CSS媒体查询解决此类问题-这正是我们在SVG中所做的。我们花了一些时间来CSS化我们的SVG，现在我们获得了好处。

Back in our <style> block we can add a CSS media query that dials up the font-size of our text when our chart has less than 500px to work with. Something like this:

回到我们的<style>块中，我们可以添加一个CSS媒体查询，当我们的图表小于500像素时，该查询会调出文本的字体大小。像这样：

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

Which gives us a result like this:

这给我们这样的结果：

Our axis labels up-size themselves when the graphic breaks 500px – but it’s a bit ugly.

当图形中断500px时，我们的轴会自行标注尺寸，但这有点丑陋。

Great! So, now the numbers on our axis are more readable at smaller scales – but they are also a little crowded and ugly too.

大！因此，现在我们的轴上的数字在较小范围内更易读-但它们也有点拥挤和丑陋。

What if we hid every second label to improve the readability of the remaining ones? Surely that would be a better UX for users on smaller devices?

如果我们每隔第二个标签藏起来以提高其余标签的可读性怎么办？对于较小设备上的用户，这肯定是更好的UX吗？

~~Let’s create a new CSS class called ‘hide-on-small’ and add it to our media query:~~

~~让我们创建一个名为“ hide-on-small”的新CSS类，并将其添加到我们的媒体查询中：~~

.hide-on-small{
display: none;
}

~~… and apply that class to every second number.~~

~~…然后将该类应用于第二个数字。~~

<text y="430" x="40">1960</text>
<text y="430" x="118" class="hide-on-small">1965</text>
<text y="430" x="196">1970</text>...

更新：2016年5月28日 (Update: May 28th 2016)

As Amelia noted in the comments below, there’s a much more elegant way to target every second number on each axis – CSS nth-of-type. This is all we need.

正如Amelia在下面的评论中指出的那样，有一种更优雅的方式来定位每个轴上的第二个数字-CSS nth-of-type。这就是我们所需要的。

.x-axis text:nth-of-type(2n),
.y-axis text:nth-of-type(2n) {
transition: opacity 1s ease-in-out;
opacity: 0;
}

That said, having a class called ‘.hide-on-small’ available may well still come in useful when creating these kinds of adaptive creations.

就是说，在创建此类自适应创建时，拥有一个可用的“ .hide-on-small”类可能仍然很有用。

Here’s how it looks in practice.

这是实际情况。

Hiding SVG elements below certain breakpoints

将SVG元素隐藏在某些断点以下

See the Pen Star Trek Vs. Star Wars NGRAM (Responsive) by SitePoint (@SitePoint) on CodePen.

参见笔星际迷航大战。 SitePoint( @SitePoint )在CodePen上进行的《星球大战NGRAM》(响应式) 。

最后的话 ( Final Word)

This is a fairly unpolished demo but I think it shows some of the potential in responsive SVG – particularly when used to improve the utility of graphs, charts and infographics.

这是一个未经修饰的演示，但我认为它显示了响应式SVG的某些潜力-尤其是在用于提高图形，图表和信息图表的实用性时。

I find it fun to use Codepen to experiment with media queries inside SVG. Watching your work develop live as you type is a rewarding way to work.

我发现使用Codepen在SVG内部试验媒体查询很有趣。看着您打字时实时观看工作进展是一种有意义的工作方式。

As you may have already worked out, you’re also free to write your CSS straight into Codepen CSS window. This is a neat way to work and allows you to incorporate the magic powers of Sass, Less or Stylus in your SVG if you want to.

您可能已经解决了问题，也可以将CSS直接写入Codepen CSS窗口中。这是一种整齐的工作方式，并且如果您愿意，可以将Sass，Less或Stylus的神奇力量整合到SVG中。

However, I would recommend moving your finished static CSS into your SVG <style> block when you’re finished. That way your SVG is a self-contained unit and won’t break if it gets separated from the CSS file.

不过，我会建议将您的成品静态CSS到您的SVG的<style>当你完成块。这样，您的SVG是一个自包含的单元，如果将其与CSS文件分开，则不会损坏。

The other nifty benefit of creating responsive SVG is they aren’t just sensitive to the device they are in – they also react to where they are placed in the layout. In other words, they can be set to expand to fill the available space and adjust their display accordingly.

创建响应式SVG的另一个不错的好处是，它们不仅对所在设备敏感，而且还对布局中的放置位置做出了React。换句话说，可以将它们设置为扩展以填充可用空间并相应地调整其显示。

This means the graph above could become its own thumbnail when it’s used in a list view of articles (it’s only 5k after all). Maybe we could strip away all text and only leave the chart lines when rendered at under 150px?

这意味着当在文章列表视图中使用时，上图可能会变成其自己的缩略图 (毕竟只有5k)。也许我们可以删除所有文本，并且仅在150px以下的渲染时保留图表线？

See the Pen Grid – Responsive Graphs by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的笔网格-响应图。

Elsewhere, that very same SVG might present differently in a ‘control panel view’ showing multiple charts like the Codepen above. Hovering over any chart simultaneously expands it into focus while bringing in more fine-grained detail.

在其他地方，相同的SVG在“控制面板视图”中的显示方式可能会有所不同，显示多个图表，如上述Codepen。将鼠标悬停在任何图表上可同时将其扩展为焦点，同时带来更多细粒度的细节。

Warning: I dialed up the CSS transitions on this demo to emphasize the changes but I might have overdone it a touch – it makes me feel kinda drunk. Still, it shows the basic principle.

警告：我在这个演示中拨了CSS过渡来强调更改，但是我可能有点过头了-这让我有点醉。它仍然显示了基本原理。

The possibilities are endless but you’ll need to hand-code them – there’s no tool that does this well.

可能性无穷无尽，但您需要手工编码-没有工具可以很好地做到这一点。

We’ll look at some other more sophisticated ways of using media queries in SVG in the weeks to come.

在接下来的几周中，我们将介绍在SVG中使用媒体查询的其他一些更复杂的方法。

翻译自: https://www.sitepoint.com/make-responsive-svg-graphs-infographics/

svg中path图形自适应