5个月前 (09-18)  互联网 |   抢沙发  1 
文章评分 0 次,平均分 0.0

学习如何构建一个交互式动画图表使用SVG,CSS和JavaScript。

交互式图表与SVG和CSS动画

谈到越少的特性之一新浏览器正在增加对SVG文件格式的支持。如果你不熟悉SVG,它代表可缩放矢量图形。与光栅图像格式像PNG,JPG或GIF,SVG文件中包含的矢量图形是完全可伸缩的任何大小和屏幕将显示在任何分辨率或密度没有质量损失。在许多情况下,SVG文件也会小得多的文件大小和下载速度会更快。

但很酷的一件事,有些开发人员没有意识到的是,SVG是建立在XML规范,在一天结束的时候,这意味着普通的标记,并且可以与HTML以类似的方式工作。这也意味着我们可以访问和操作使用技术如SVG文件中的图形和元素的CSS和JavaScript web开发人员已经熟悉。

有正确的技术和现代的浏览器支持,开发人员现在可以产生一些相当令人印象深刻的动画,效果和交互使用SVG。今天,我们将探讨的可能性SVG和测试现代浏览器的功能通过创建一个交互式矢量信息的网络。

准备一个SVG文件

有大量的方法来创建SVG图形,同时可以做一些SVG编码“手工”,对于更复杂的图形,我们将需要某种类型的向量编辑软件可以导出SVG。中一个受欢迎的选择当然设计师可能熟悉的Adobe Illustrator,但还有其他自由/开源应用程序等,在某些方面甚至可能更适合我们的目的。

无论你选择何种软件,必须有能力对象分组,并能够名称的组(分配 id属性)。这让我们组织我们的SVG到一个适当的层次,我们可以根据需要访问使用CSS或JavaScript。插画家和Inkscape有能力这样做,通过选择多个图形元素和选择对象>组织(或取消组)从顶部菜单。

任何对象或一组可以分配一个名称。这变成了 id出口时组或对象的属性,所以避免空格或特殊字符。同时,避免重复。

在插画家,这可以从层板完成。直接导航到面板内的对象你想名字,双击它,进入 id你想使用。Inkscape,使用对象>对象属性分配一个对象或一组一个小组 id。或者,可以从编辑> XML编辑器面板,它提供了更多的控制输出,甚至有能力分配类,不仅id

交互式图表与SVG和CSS动画

在我们的例子中,当我们拯救我们的SVG和在文本编辑器中打开它,它会有以下类型的结构:

<span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"background"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"bg-lines-left"</span>&gt;</span> <span class="hljs-comment">&lt;!-- left background lines --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"bg-lines-right"</span>&gt;</span> <span class="hljs-comment">&lt;!-- right background lines --&gt;</span>  <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"logo"</span>&gt;</span> <span class="hljs-comment">&lt;!-- logo graphics --&gt;</span>  <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"quote"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"quote-left-brace"</span>&gt;</span> <span class="hljs-comment">&lt;!-- left quote brace --&gt;</span>  <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"quote-right-brace"</span>&gt;</span> <span class="hljs-comment">&lt;!-- right quote brace --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"quote-text"</span>&gt;</span> <span class="hljs-comment">&lt;!-- quote text --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"timeline"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"coffee"</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">rect</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"coffee-bar"</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">polyline</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"coffee-arrow"</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"coffee-time"</span>&gt;</span> <span class="hljs-comment">&lt;!-- time text --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"coffee-badge"</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">circle</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"coffee-circle"</span> /&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"coffee-title"</span>&gt;</span> <span class="hljs-comment">&lt;!-- title text --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"coffee-details"</span>&gt;</span> <span class="hljs-comment">&lt;!-- icon, description --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"design"</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">rect</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"design-bar"</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">polyline</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"design-arrow"</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"design-time"</span>&gt;</span> <span class="hljs-comment">&lt;!-- time text --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"design-badge"</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">circle</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"design-circle"</span> /&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"design-title"</span>&gt;</span> <span class="hljs-comment">&lt;!-- title text --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"design-details"</span>&gt;</span> <span class="hljs-comment">&lt;!-- icon, description --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"build"</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">rect</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"build-bar"</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">polyline</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"build-arrow"</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"build-time"</span>&gt;</span> <span class="hljs-comment">&lt;!-- time text --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"build-badge"</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">circle</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"build-circle"</span> /&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"build-title"</span>&gt;</span> <span class="hljs-comment">&lt;!-- title text --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"build-details"</span>&gt;</span> <span class="hljs-comment">&lt;!-- icon, description --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"complain"</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">rect</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"complain-bar"</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">polyline</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"complain-arrow"</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"complain-time"</span>&gt;</span> <span class="hljs-comment">&lt;!-- time text --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"complain-badge"</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">circle</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"complain-circle"</span> /&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"complain-title"</span>&gt;</span> <span class="hljs-comment">&lt;!-- title text --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"complain-details"</span>&gt;</span> <span class="hljs-comment">&lt;!-- icon, description --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"beer"</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">rect</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"beer-bar"</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">polyline</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"beer-arrow"</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"beer-time"</span>&gt;</span> <span class="hljs-comment">&lt;!-- time text --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"beer-badge"</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">circle</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"beer-circle"</span> /&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"beer-title"</span>&gt;</span> <span class="hljs-comment">&lt;!-- title text --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">g</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"beer-details"</span>&gt;</span> <span class="hljs-comment">&lt;!-- icon, description --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">g</span>&gt;</span>

上面所示的标记已经精简结构简单地显示我们,但它是一个好主意,花一些时间来分析实际的SVG输出文件在文本编辑器和熟悉的标记。你会发现很多熟悉的东西HTML,以及一些新的东西。

我们可以看到在我们的SVG标记,每一个 <g>标记表示一组新的对象,可以嵌套在其他组。当然,当创建一个SVG,没有必要分配一个 id每个对象/组,它只是使它最方便的访问后通过CSS或JavaScript和看时也更容易识别标记。

SVG加载到HTML使用JavaScript

HTML

有许多在HTML中嵌入SVG或地点的方法。可以使用 <img>标签, <embed>标签,甚至使用CSS的background-image财产。对于我们的目的,我们需要访问DOM在我们实际的SVG,因此我们将使用HTML5的内联SVG功能使用jQuery和直接加载到页面。

首先,我们将创建一个占位符 div在我们的HTML文档:

<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"stage"</span>&gt;</span> <span class="hljs-comment">&lt;!-- Fallback Text Content can go here --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;
</span>

JavaScript

然后,使用jQuery。负载,我们将SVG文件加载到我们 #stagediv和给它的类 svgLoaded我们将稍后使用触发我们的介绍动画:

$(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{

        $(<span class="hljs-string">"#stage"</span>).load(<span class="hljs-string">'interactive.svg'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(response)</span></span>{

                $(<span class="hljs-keyword">this</span>).addClass(<span class="hljs-string">"svgLoaded"</span>);
                
                <span class="hljs-keyword">if</span>(!response){
                        <span class="hljs-comment">// Error loading SVG!</span>
                        <span class="hljs-comment">// Make absolutely sure you are running this on a web server or localhost!</span>
                }

        });
});

重要的是:我们加载SVG使用JavaScript来获得DOM。铬(或者其他浏览器)不会让你这样做本地;它只运行时的工作 HTTP协议出于安全原因。如果你有问题让SVG负载,确保测试从web服务器或上运行 localhost

CSS

注意,在本教程将不会包含任何特定CSS样式或前缀,但你会发现他们的文件。

要做的第一件事情是设置一些风格的容器 div。SVG加载时的默认行为是规模大小的容器,所以重要的是要设置适当的容器尺寸SVG画布的大小。

        <span class="hljs-id">#stage</span> <span class="hljs-rules">{
                <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">1024px</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">1386px</span></span></span>;
        <span class="hljs-rule">}</span></span>

transform-origins样式SVG元素:设置

SVG动画的关键元素在我们的帆布在于 transform-origin财产。默认情况下,所有的转换在我们的SVG发生任何元素 (0px, 0px)SVG的画布。我们希望变换(如的任何元素。规模、旋转),我们需要设置适当的transform-origin相对于左上角的SVG画布。原点为每个元素将不同取决于预期的效果/动画,但在大多数情况下就等于中心点的元素已经被定位。这可能是相当乏味,但简单通过复制向量编辑软件中提供的坐标信息。

<span class="hljs-id">#coffee</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">517px</span> <span class="hljs-number">484px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#coffee-badge</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">445px</span> <span class="hljs-number">488px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#coffee-title</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">310px</span> <span class="hljs-number">396px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#coffee-details</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">311px</span> <span class="hljs-number">489px</span></span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-id">#design</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">514px</span> <span class="hljs-number">603px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#design-badge</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">580px</span> <span class="hljs-number">606px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#design-title</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">712px</span> <span class="hljs-number">513px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#design-details</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">710px</span> <span class="hljs-number">620px</span></span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-id">#build</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">511px</span> <span class="hljs-number">769px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#build-badge</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">445px</span> <span class="hljs-number">775px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#build-title</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">312px</span> <span class="hljs-number">680px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#build-details</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">310px</span> <span class="hljs-number">790px</span></span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-id">#complain</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">512px</span> <span class="hljs-number">1002px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#complain-badge</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">586px</span> <span class="hljs-number">1000px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#complain-title</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">718px</span> <span class="hljs-number">921px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#complain-details</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">717px</span> <span class="hljs-number">1021px</span></span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-id">#beer</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">513px</span> <span class="hljs-number">1199px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#beer-badge</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">444px</span> <span class="hljs-number">1193px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#beer-title</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">313px</span> <span class="hljs-number">1097px</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#beer-details</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">316px</span> <span class="hljs-number">1202px</span></span></span>;
<span class="hljs-rule">}</span></span>

应用一些最初的转换

在我们创建的艺术在我们矢量软件,我们把它显示每个时间轴部分的“悬浮”状态。所以我们需要设置一些最初的风格,定位一些事情和隐藏某些对象,我们不想显示直到徘徊交互性。

要做到这一点,我们将使用一些先进的CSS选择器。基本上,我们根据他们的选择对象 id“后缀”(不管 id结尾)。

<span class="hljs-attr_selector">[id$=badge]</span> <span class="hljs-rules">{ <span class="hljs-comment">/* Any element with an id that ends in "badge" */</span>
        <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scale</span>(<span class="hljs-number">0.5</span>, <span class="hljs-number">0.5</span>)</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-attr_selector">[id$=title]</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scale</span>(<span class="hljs-number">1.8</span>) <span class="hljs-function">translate</span>(<span class="hljs-number">0px</span>, <span class="hljs-number">48px</span>)</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-attr_selector">[id$=details]</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scale</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>)</span></span>;
<span class="hljs-rule">}</span></span>

注意:在Inkscape或者可以分配一个 classCSS属性,它将允许选择类。虽然它总是可以手动将类添加到SVG,插画家将剔除这些外国属性保存,没有进一步的修改可能意义。

加入:悬浮样式和应用转换

我们选择的元素组徘徊在时间轴的徽章,细节和标题 id后缀,改变他们回到原来的位置。然后,我们设置好了0.25s转变为一个很酷的动画效果。

<span class="hljs-id">#timeline</span> &gt; <span class="hljs-tag">g</span><span class="hljs-pseudo">:hover</span> <span class="hljs-attr_selector">[id$=badge]</span>, <span class="hljs-id">#timeline</span> &gt; <span class="hljs-tag">g</span><span class="hljs-pseudo">:hover</span> <span class="hljs-attr_selector">[id$=details]</span> <span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scale</span>(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>)</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-id">#timeline</span> &gt; <span class="hljs-tag">g</span><span class="hljs-pseudo">:hover</span> <span class="hljs-attr_selector">[id$=title]</span> <span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scale</span>(<span class="hljs-number">1</span>) <span class="hljs-function">translate</span>(<span class="hljs-number">0px</span>, <span class="hljs-number">0px</span>)</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-attr_selector">[id$=badge]</span>, <span class="hljs-attr_selector">[id$=title]</span>, <span class="hljs-attr_selector">[id$=details]</span> <span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">transition</span>:<span class="hljs-value"> transform <span class="hljs-number">0.25s</span> ease-in-out</span></span>;
<span class="hljs-rule">}</span></span>

介绍动画

建立一个好的动画介绍序列,我们将使用一些CSS动画。为了做到这一点,我们首先需要创建一些关键帧,将允许我们动画不同的CSS属性:

<span class="hljs-at_rule">@<span class="hljs-keyword">keyframes</span> left-brace-intro </span>{
        0% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">translateX</span>(<span class="hljs-number">220px</span>)</span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">opacity</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
        <span class="hljs-rule">}</span></span>
        50% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">opacity</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">translateX</span>(<span class="hljs-number">220px</span>)</span></span>;
        <span class="hljs-rule">}</span></span>
        100% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">translateX</span>(<span class="hljs-number">0px</span>)</span></span>;
        <span class="hljs-rule">}</span></span>
}
<span class="hljs-at_rule">@<span class="hljs-keyword">keyframes</span> right-brace-intro </span>{
        0% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">translateX</span>(-<span class="hljs-number">220px</span>)</span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">opacity</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
        <span class="hljs-rule">}</span></span>
        50% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">opacity</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">translateX</span>(-<span class="hljs-number">220px</span>)</span></span>;
        <span class="hljs-rule">}</span></span>
        100% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">translateX</span>(<span class="hljs-number">0px</span>)</span></span>;
        <span class="hljs-rule">}</span></span>
}
<span class="hljs-at_rule">@<span class="hljs-keyword">keyframes</span> fade-in </span>{
        0% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">opacity</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
        <span class="hljs-rule">}</span></span>
        100% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">opacity</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
        <span class="hljs-rule">}</span></span>
}
<span class="hljs-at_rule">@<span class="hljs-keyword">keyframes</span> grow-y </span>{
        0% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scaleY</span>(<span class="hljs-number">0</span>)</span></span>;
        <span class="hljs-rule">}</span></span>
        100% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scaleY</span>(<span class="hljs-number">1</span>)</span></span>;
        <span class="hljs-rule">}</span></span>
}
<span class="hljs-at_rule">@<span class="hljs-keyword">keyframes</span> grow-x </span>{
        0% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scaleX</span>(<span class="hljs-number">0</span>)</span></span>;
        <span class="hljs-rule">}</span></span>
        100% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scaleX</span>(<span class="hljs-number">1</span>)</span></span>;
        <span class="hljs-rule">}</span></span>
}
<span class="hljs-at_rule">@<span class="hljs-keyword">keyframes</span> grow </span>{
        0% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scale</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>)</span></span>;
        <span class="hljs-rule">}</span></span>
        100% <span class="hljs-rules">{ 
                <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scale</span>(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>)</span></span>;
        <span class="hljs-rule">}</span></span>
}

创建一个动画介绍序列

与我们现在的关键帧动画,我们可以建立一个不错的动画介绍仅仅通过使用各种元素的动画。因为我们只需要介绍动画SVG是第一次加载时,我们可以使用后代选择器的基础上 svgLoaded我们之前申请的类。

制定一个动画序列,我们会调整 animation-delay属性,并设置 animation-fill-mode: backwards所以动画依然是0%的关键帧上停了下来 animation-delay.

<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#logo</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">animation</span>:<span class="hljs-value"> fade-in <span class="hljs-number">0.5s</span> ease-in-out</span></span>; 
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#quote-text</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">animation</span>:<span class="hljs-value"> fade-in <span class="hljs-number">0.5s</span> ease-in-out <span class="hljs-number">0.75s</span></span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">animation-fill-mode</span>:<span class="hljs-value"> backwards</span></span>; 
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#quote-left-brace</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">animation</span>:<span class="hljs-value"> left-brace-intro <span class="hljs-number">1s</span> ease-in-out <span class="hljs-number">0.25s</span></span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">animation-fill-mode</span>:<span class="hljs-value"> backwards</span></span>; 
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#quote-right-brace</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">animation</span>:<span class="hljs-value"> right-brace-intro <span class="hljs-number">1s</span> ease-in-out <span class="hljs-number">0.25s</span></span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">animation-fill-mode</span>:<span class="hljs-value"> backwards</span></span>; 
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#background</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">animation</span>:<span class="hljs-value"> grow-y <span class="hljs-number">0.5s</span> ease-in-out <span class="hljs-number">1.25s</span></span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">512px</span> <span class="hljs-number">300px</span></span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">animation-fill-mode</span>:<span class="hljs-value"> backwards</span></span>; 
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#background</span> &gt; <span class="hljs-tag">g</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">animation</span>:<span class="hljs-value"> grow-x <span class="hljs-number">0.25s</span> ease-in-out <span class="hljs-number">1.75s</span></span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">animation-fill-mode</span>:<span class="hljs-value"> backwards</span></span>; 
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#background</span> &gt; <span class="hljs-tag">g</span><span class="hljs-pseudo">:last-of-type</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">458px</span> <span class="hljs-number">877px</span></span></span>; 
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#background</span> &gt; <span class="hljs-tag">g</span><span class="hljs-pseudo">:first-of-type</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">transform-origin</span>:<span class="hljs-value"> <span class="hljs-number">563px</span> <span class="hljs-number">877px</span></span></span>; 
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#coffee</span>, <span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#design</span>, <span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#build</span>, <span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#complain</span>, <span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#beer</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">animation</span>:<span class="hljs-value"> grow <span class="hljs-number">0.25s</span> ease-in-out</span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">animation-fill-mode</span>:<span class="hljs-value"> backwards</span></span>; 
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#coffee</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">animation-delay</span>:<span class="hljs-value"> <span class="hljs-number">2s</span></span></span>; 
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#design</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">animation-delay</span>:<span class="hljs-value"> <span class="hljs-number">2.25s</span></span></span>; 
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#build</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">animation-delay</span>:<span class="hljs-value"> <span class="hljs-number">2.5s</span></span></span>; 
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#complain</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">animation-delay</span>:<span class="hljs-value"> <span class="hljs-number">2.75s</span></span></span>; 
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.svgLoaded</span> <span class="hljs-id">#beer</span> <span class="hljs-rules">{ 
        <span class="hljs-rule"><span class="hljs-attribute">animation-delay</span>:<span class="hljs-value"> <span class="hljs-number">3s</span></span></span>; 
<span class="hljs-rule">}</span></span>

网页字体

因为我们有在我们的SVG使用非标准字体,我们必须包括他们在我们的网页为了正确显示。当这样做,重要的是要得到正确的字体名称时使用SVG是出口。我们将在文本编辑器中打开我们的SVG文件,只是找到一个文本节点使用我们的字体和寻找 font-family属性:

<span class="hljs-comment">&lt;!-- ... --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">text</span> <span class="hljs-attribute">font-family</span>=<span class="hljs-value">"'LeagueGothic'"</span> <span class="hljs-attribute">font-size</span>=<span class="hljs-value">"28"</span>&gt;</span>12PM<span class="hljs-tag">&lt;/<span class="hljs-title">text</span>&gt;</span>
<span class="hljs-comment">&lt;!-- ... --&gt;</span>

我们可以看到,SVG出口使用 font-family名字“LeagueGothic”。所以我们只需要定义一个webfont CSS使用相同的名字。这是完全相同的过程使用web字体在任何普通的HTML页面。

<span class="hljs-annotation">@font</span>-face {
        font-family: <span class="hljs-string">'LeagueGothic'</span>;
        url(<span class="hljs-string">"../fonts/league-gothic/league-gothic.eot.woff"</span>) format(<span class="hljs-string">"woff"</span>);
 }

这是它!我希望你喜欢这个教程,发现它有用的信息!我很想听听您的意见关于使用SVG交互,并希望看到其他人也想出!

<span class="hljs-tag"> </span>
 

除特别注明外,本站所有文章均为日升互动娱乐- 聚合数据平台原创,转载请注明出处来自http://www.rs-sx.com/jiaohushitubiaoyusvghecssdonghua/

平面设计师(8 +年)来自加拿大。我爱设计/ web /交互性。

发表评论

表情 格式

暂无评论

切换注册

登录

忘记密码 ?

切换登录

注册

扫一扫二维码分享