国产在线拍揄自揄视频网站,久久人人做人人妻人人玩精品VA,最近更新中文字幕大全免费

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

11個示例詳細介紹SVG stroke形狀屬性及如何用其制作動畫

作者:admin 時間:2024-4-22 16:47:8 瀏覽:

stroke-width設(shè)置形狀的描邊粗細。如果在 HTML 中，框架是從外邊緣繪制到形狀中并增加其大小（可以使用box-sizing進行校正），而在 SVG 中，輪廓的行為有所不同：首先，它不會拉伸形狀，其次，它會同時繪制相對于圖形的外邊緣向內(nèi)和向外。

簡單形狀示例

為了看看它是如何工作的，讓我們看幾個簡單的形狀：

svg形狀

demo download

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

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

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

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

結(jié)果：

svg形狀添加邊框

demo download

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

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

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

demo download

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

注意

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

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

svg框架白邊距越大，框架越細

demo download

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

框架代碼：

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

結(jié)果：

svg添加stroke-dasharray屬性

demo download

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

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

使用蒙版

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

為什么這是必要的？

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

<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)然是transform。動畫代碼：

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

連接動畫：

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

svg連接動畫

demo download

由于 SVG 中的變換中心位于渲染區(qū)域的左上角，因此形狀根本不會像我們希望的那樣移動。我們設(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ù)動畫，設(shè)置了變換中心

demo download

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

stroke設(shè)置動畫

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

為什么這會起作用？

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

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

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

demo download

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

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

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

我給它一個白色填充并添加一個描邊：

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

添加描邊粗細動畫：

@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蒙版動畫