免费无遮挡无码永久视频,无码做a视频在线观看,久久精品国产亚洲精品2020

技術(shù)頻道 - html技術(shù)

11個(gè)示例詳細(xì)介紹SVG stroke形狀屬性及如何用其制作動(dòng)畫

作者:admin 時(shí)間:2024-4-22 16:47:8 瀏覽:

stroke-width設(shè)置形狀的描邊粗細(xì)。如果在 HTML 中，框架是從外邊緣繪制到形狀中并增加其大?。梢允褂?code>box-sizing進(jìn)行校正），而在 SVG 中，輪廓的行為有所不同：首先，它不會(huì)拉伸形狀，其次，它會(huì)同時(shí)繪制相對(duì)于圖形的外邊緣向內(nèi)和向外。

簡(jiǎn)單形狀示例

為了看看它是如何工作的，讓我們看幾個(gè)簡(jiǎn)單的形狀：

svg形狀

demo download

直徑為 60 像素的圓形，直徑為 60x60 像素的正方形。

使用 CSS，為形狀添加邊框：

stroke: yellowgreen;
stroke-width: 30;
stroke-opacity: .5;

框架為綠色，30 像素厚。要查看它如何疊加在形狀上，請(qǐng)將框架設(shè)置為半透明 ( stroke-opacity: .5)。

結(jié)果：

svg形狀添加邊框

demo download

顯然，框架是從圖形的外邊緣向兩個(gè)方向繪制的：向內(nèi)和向外。

常規(guī)框架的行為非常清晰且可預(yù)測(cè)，但如果你指定的框架超過圖形寬度的兩倍，那么樂趣就開始了。差異越大，結(jié)果就越有趣。為了使其清晰可見，我將框架設(shè)置為寬度的三倍 (60 * 3 = 180)：

將svg形狀的框架設(shè)置為寬度的三倍

demo download

帶框架的正方形很好，但圓形會(huì)發(fā)生一些奇怪的情況：如果輪廓的厚度超過圖形寬度的兩到三倍，則圓形和框架之間會(huì)形成白色區(qū)域，并且圓形的厚度也會(huì)增加。幀減少。

注意

各瀏覽器如：Chrome、Firefox、Safari、IE 等，顯示結(jié)果可能不一樣。

值之間的差異越大，白邊距越大，框架越細(xì)（半徑 10，描邊粗細(xì) 200）：

svg框架白邊距越大，框架越細(xì)

demo download

如果添加stroke-dasharray屬性，則會(huì)獲得更有趣的結(jié)果。

框架代碼：

stroke-width: 180;
stroke: yellowgreen;
stroke-opacity: .5;
stroke-dasharray: 5;

結(jié)果：

svg添加stroke-dasharray屬性

demo download

看起來框架好像到達(dá)了圖形的中間并從那里繼續(xù)繪制。

所有這些似乎都在向我們暗示，框架的厚度不應(yīng)超過圖形寬度或直徑的兩倍，盡管你可以做相反的事情：設(shè)置非常大的值并獲得有趣的光線選項(xiàng)。

使用蒙版

我認(rèn)為很少有人會(huì)想到給筆畫一個(gè)過大的寬度，但當(dāng)我想這樣做時(shí)，我發(fā)現(xiàn)了這種奇怪的行為：取一個(gè)小圓圈并給它一個(gè)大邊框，從而增加它的大小。

為什么這是必要的？

假設(shè)有一個(gè)圓形蒙版和它下面的圖像：

<svg>
  <mask id="mask">
    <circle r="100" cx="100" cy="100"
      class="c-mask-circle"/>
  </mask>

  <g mask="url(#mask)">
    <image
      xlink:href="1.png"
      width="100%" height="100%"/>
  </g>
</svg>

svg圓形蒙版

demo download

蒙版處理動(dòng)畫

如果想對(duì)蒙版進(jìn)行動(dòng)畫處理，使其相對(duì)于圖像中心按比例膨脹和收縮。第一個(gè)想到的當(dāng)然是transform。動(dòng)畫代碼：

@keyframes scale {
  50% {
    transform: scale(10);
  }
}

連接動(dòng)畫：

.c-mask-circle {
  fill: white;
  animation: scale 5s infinite;
}

svg連接動(dòng)畫

demo download

由于 SVG 中的變換中心位于渲染區(qū)域的左上角，因此形狀根本不會(huì)像我們希望的那樣移動(dòng)。我們?cè)O(shè)置我們需要的變換中心：

transform-origin: 100px 100px;

以及所有一起：

.c-mask-circle {
  fill: white;
  transform-origin: 100px 100px;
  animation: scale 5s infinite;
}

@keyframes scale {
  50% {
    transform: scale(10);
  }
}

結(jié)果：

svg連續(xù)動(dòng)畫，設(shè)置了變換中心

demo download

在 Chrome 中，動(dòng)畫將按預(yù)期工作，蒙版從中心開始增長(zhǎng)，然后沿相反方向減小。它在 Firefox 中根本不起作用：Firefox 不會(huì)在蒙版內(nèi)設(shè)置動(dòng)畫轉(zhuǎn)換。

stroke設(shè)置動(dòng)畫

轉(zhuǎn)換方法不起作用。還有哪些其他選擇？在這種情況下，你可以嘗試為筆畫的粗細(xì)設(shè)置動(dòng)畫。

為什么這會(huì)起作用？

一個(gè)題外話：clip-Path與沿矢量輪廓裁剪圖形、忽略輪廓的填充和描邊不同，它的所有圖形內(nèi)容都參與蒙版的操作。

例如，我們用一個(gè)筆畫畫一個(gè)圓，并將其用在mask和clip-Path中：

svg筆畫畫一個(gè)圓，并將其用在mask和clip-Path中

demo download

你可以嘗試為clip-path里面的形狀設(shè)置動(dòng)畫transform，但它們?cè)?Firefox 中也不會(huì)成為動(dòng)畫。因此，我們只能使用蒙版和筆畫操作。

我嘗試使用筆觸重復(fù)蒙版的行為，相對(duì)于中心按比例增加。為了這些目的，我做了一個(gè)里面有一個(gè)小圓圈的面罩：

<mask id="mask">
  <circle r="10" cx="100" cy="100"
    class="c-mask-circle"/>
</mask>

我給它一個(gè)白色填充并添加一個(gè)描邊：

.c-mask-circle {
  fill: white;
  stroke: white;
  stroke-width: 1;
}

添加描邊粗細(xì)動(dòng)畫：

@keyframes stroke-width {
  50% {
    stroke-width: 170;
  }
}

所有最終代碼：

.c-mask-circle {
  fill: white;
  stroke: white;
  stroke-width: 1;
  animation: stroke-width 5s infinite;
}

@keyframes stroke-width {
  50% {
    stroke-width: 170;
  }
}

結(jié)果：

svg蒙版動(dòng)畫