찾다
웹 프론트엔드H5 튜토리얼SVG基础|SVG图形描边


  SVG的描边属性stroke用于定义图形的描边样式。stroke是一个基本的SVG CSS属性,你可以为任何SVG图形设置描边样式。

  STYLE属性
  我们可以在SVG图形中使用style属性来为图形设置描边和填充等样式。下面是一个例子:


  1. <circle cx="50" cy="50" r="50"
            style="stroke: #000066; fill: 3333ff;" />

 上面的例子定义了一个圆形,并带有深蓝色的描边和浅蓝色的填充色。

  描边示例
  使用stroke属性可以为图形设置描边效果。看下面的例子:

<circle cx="50" cy="50" r="25"
      style="stroke: #000000; fill:none;" />


  上面的代码为圆形设置描边颜色为黑色。得到的结果如下:

905.png

  描边宽度
  我们可以使用stroke-width CSS属性来为图形的描边设置宽度。下面是一个设置描边宽度的例子:

stroke-width: 3px;


  这个例子设置描边宽度为3像素。除了使用像素为单位,你还可以使用其它的CSS单位来设置描边宽度。可用的单位有:

  •   em:默认的字体大小,通常一个字符的高度

  •   ex:字符x的高度

  •   px:像素

  •   pt:点数,1/72英寸

  •   pc:Picas,1/6英寸

  •   cm:厘米

  •   mm:毫秒

  •   in:英寸


  下面是一个使用不同尺寸描边宽度的例子:

<circle cx="50" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 1px;" />
<circle cx="150" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 3px;" />
<circle cx="250" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 6px;" />
<circle cx="350" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 12px;" />


  下面是上面代码的返回结果:
906.png
  描边的线头(STROKE-LINECAP)

  stroke-linecap CSS属性用于定义图形描边中线条头部的渲染样式。有3种可能的stroke-linecap样式:

  •   butt

  •   square

  •   round


  butt属性指定线条的头部从线条的结束处被精确的切断。square属性和butt类似,但是它会在线条的两端留下一些空间。round属性指定线条使用圆形的线头。

  下面的图形显示了分别使用三种stroke-linecap时的线条样式,从上到下分别是:butt,square和round。

907.png

  上面的例子定义了三条stroke-width为10像素的绿色线条,它们分别带有不同的stroke-linecap CSS属性。在绿色线条中,分别定义了三条和绿色线条坐标相同的直线,但是它们没有定义stroke-linecap属性,这样你可以很明显的看出三种不同stroke-linecap属性的区别。

  描边的连线(STROKE-LINEJOIN)

  stroke-linejoin CSS属性定义图形在渲染时两条相连的线如何连接。stroke-linejoin CSS属性有三种取值:

  •   miter

  •   round

  •   bevel


  下面是一个使用三种不同stroke-linejoin CSS属性绘制的图形连线额例子:

<path d="M20,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;" />
<path d="M120,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: round;" />
<path d="M220,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: bevel;" />


  下面是返回结果:

908.png

  描边的斜线限制(STROKE-MITERLIMIT)

  stroke-miterlimit CSS属性通常和stroke-linejoin属性一起使用。假如你设置了stroke-linejoin为miter,那么stroke-miterlimit可以用来限制两条线的相交点的距离。

  下面是一个使用stroke-linejoin CSS属性的例子:

<path d="M20,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 1.0;
             " />
<path d="M120,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 2.0;
             " />
<path d="M220,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 4.0;
             " />


  注意观察使用不同的stroke-linejoin CSS属性时三条路径的连线情况,下面是返回结果:
909.png

  连线的长度被称为miter(斜线)长度。斜线长度是从连线的内角定点到连线的外角的距离。看下面的图示:

910.png
  可以想象,描边的宽度越宽,两条连线的角度越尖,miter长度就越长。

  stroke-miterlimit实际上是设置斜线长度和描边宽度之间的比例。例如,stroke-miterlimit设置为1.0表示miter长度和描边宽度相同(1 X 描边宽度),超过这个长度的部分会被剪切掉。1.0是stroke-miterlimit属性的最小取值,不能再小。

  下面是一些使用stroke-miterlimit取值为1.0的例子,但是连线的角度各不相同:


911.png


  注意观察,角度越大的时候,连线被切掉的部分越多。

  STROKE-DASHARRAY

  SVG stroke-dasharray CSS属性用于绘制图形的虚线描边。之所以会被称之为“dash array”,是因为我们要为它提供一组数值。这组数值定义虚线的长度和间距。因此,这组数值的个数应该是偶数个。

  下面是一个SVG stroke-dasharray的例子:

<line x1="20" y1="20" x2="120" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5"  />


  这个例子定义了一条每个虚线段长度为10像素的虚线,两段虚线之间的间距为5像素。下面是返回结果:

912.png
  下面是一些其它虚线的例子。

<line x1="20" y1="20" x2="120" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5 5 5"  />
<line x1="20" y1="40" x2="120" y2="40"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5 5 10"  />


  第一条虚线以10像素虚线段开始,接着是5像素的间距,然后是5像素的虚线段,再接着是5像素的间距,然后按照这个模式一直延伸下去。

  第二条虚线是以10像素虚线段开始,接着是5像素的间距,然后是5像素的虚线段,再接着是10像素的间距,然后按照这个模式一直延伸下去。

  下面是它们的返回结果:


913.png
  STROKE-DASHOFFSET

  stroke-dashoffset CSS属性用于指定从多远开始执行指定的虚线模式。使用这个属性你可以指定从任何地方开始指定的虚线模式,例如从一半开始,然后重复虚线模式。下面是一个stroke-dashoffset的例子:

<line x1="20" y1="20" x2="170" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5;
      stroke-dashoffset: 5;
      "  />


  这个例子设置dash-offset为5个像素,意思是将从虚线模式往后5个像素开始渲染虚线。注意不是所有的浏览器都支持这个属性。下面是上面代码的返回结果:


914.png
  描边透明度(STROKE-OPACITY)

  SVG stroke-opacity CSS属性用于定义图形描边的透明度。stroke-opacity属性的取值在0-1之间。越接近0,描边越透明。越接近1,描边越不透明。默认的stroke-opacity取值为1,也就是完全不透明。

  下面是一个使用不同的 SVG stroke-opacity属性的例子。


  1. <path d="M20,40 l50,0"
          style="stroke: #00ff00;    fill:none;
                 stroke-width:16px;
                 stroke-opacity: 0.3;
                 " />
    <path d="M80,40 l50,0"
          style="stroke: #00ff00;    fill:none;
                 stroke-width:16px;
                 stroke-opacity: 0.7;
                 " />
    <path d="M140,40 l50,0"
          style="stroke: #00ff00;    fill:none;
                 stroke-width:16px;
                 stroke-opacity: 1;
                 " />


  下面是返回结果:

915.png

以上就是SVG基础|SVG图形描边的内容,更多相关内容请关注PHP中文网(www.php.cn)!


성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
H5 : 도구, 프레임 워크 및 모범 사례H5 : 도구, 프레임 워크 및 모범 사례Apr 11, 2025 am 12:11 AM

H5 개발에서 마스터 해야하는 도구 및 프레임 워크에는 vue.js, React 및 Webpack이 포함됩니다. 1.vue.js는 사용자 인터페이스를 구축하고 구성 요소 개발을 지원하는 데 적합합니다. 2. 복잡한 응용 프로그램에 적합한 가상 DOM을 통해 페이지 렌더링을 최적화합니다. 3. Webpack은 모듈 포장에 사용되며 리소스로드를 최적화합니다.

HTML5의 유산 : 현재 H5 이해HTML5의 유산 : 현재 H5 이해Apr 10, 2025 am 09:28 AM

html5hassignificallytransformedwebdevelopmentbyintranticalticlementements, 향상 Multimediasupport 및 Improvingperformance.1) itmadewebsitessmoreaccessibleadseo 친환경적 인 요소, 및 .2) Html5intagnatee

H5 코드 : 접근성 및 시맨틱 HTMLH5 코드 : 접근성 및 시맨틱 HTMLApr 09, 2025 am 12:05 AM

H5는 시맨틱 요소 및 ARIA 속성을 통해 웹 페이지 접근성 및 SEO 효과를 향상시킵니다. 1. 컨텐츠 구조를 구성하고 SEO를 개선하기 위해 사용합니다. 2. Aria-Label과 같은 ARIA 속성은 접근성을 향상시키고 보조 기술 사용자는 웹 페이지를 원활하게 사용할 수 있습니다.

H5는 html5와 동일합니까?H5는 html5와 동일합니까?Apr 08, 2025 am 12:16 AM

"H5"와 "HTML5"는 대부분의 경우 동일하지만 특정 시나리오에서는 다른 의미를 가질 수 있습니다. "HTML5"는 새로운 태그와 API를 포함하는 W3C 정의 표준입니다. "H5"는 일반적으로 HTML5의 약어이지만 모바일 개발에서는 HTML5를 기반으로 한 프레임 워크를 참조 할 수 있습니다. 이러한 차이를 이해하면 프로젝트 에서이 용어를 정확하게 사용하는 데 도움이됩니다.

H5의 기능은 무엇입니까?H5의 기능은 무엇입니까?Apr 07, 2025 am 12:10 AM

H5 또는 HTML5는 HTML의 다섯 번째 버전입니다. 개발자에게 더 강력한 도구 세트를 제공하여 복잡한 웹 애플리케이션을보다 쉽게 ​​만들 수 있습니다. H5의 핵심 기능에는 다음이 포함됩니다. 1) 웹 페이지에 그래픽 및 애니메이션을 그리는 요소; 2) 웹 페이지 구조를 SEO 최적화에 명확하고 도움이되는 시맨틱 태그 등; 3) GeolocationApi 지원 위치 기반 서비스와 같은 새로운 API; 4) 호환성 테스트 및 폴리 필 라이브러리를 통해 크로스 브라우저 호환성을 보장해야합니다.

H5 링크를 수행하는 방법H5 링크를 수행하는 방법Apr 06, 2025 pm 12:39 PM

H5 링크를 만드는 방법? 링크 대상 결정 : H5 페이지 또는 응용 프로그램의 URL을 가져옵니다. HTML 앵커 작성 : & lt; a & gt; 태그 앵커를 만들고 링크 대상 URL을 지정합니다. 링크 속성 설정 (선택 사항) : 필요에 따라 대상, 제목 및 on 클릭 속성을 설정하십시오. 웹 페이지에 추가 : 링크가 나타나려는 웹 페이지에 HTML 앵커 코드를 추가하십시오.

H5 호환성 문제를 해결하는 방법H5 호환성 문제를 해결하는 방법Apr 06, 2025 pm 12:36 PM

H5 호환성 문제에 대한 솔루션에는 다음이 포함됩니다. 웹 페이지가 화면 크기에 따라 레이아웃을 조정할 수있는 반응 형 디자인을 사용합니다. 릴리스 전에 호환성을 테스트하기 위해 브라우저 크로스 브라우저 테스트 도구를 사용하십시오. PolyFill을 사용하여 이전 브라우저의 새로운 API를 지원합니다. 웹 표준을 따르고 효과적인 코드 및 모범 사례를 사용하십시오. CSS 프리 프로세서를 사용하여 CSS 코드를 단순화하고 가독성을 향상시킵니다. 이미지를 최적화하고 웹 페이지 크기를 줄이며로드 속도를 높이십시오. HTTPS를 통해 웹 사이트의 보안을 보장하십시오.

H5와 링크를 생성하는 방법H5와 링크를 생성하는 방법Apr 06, 2025 pm 12:33 PM

H5 페이지는 링크를 수동으로 만들거나 짧은 링크 서비스를 사용하는 두 가지 방식으로 링크를 생성 할 수 있습니다. 수동으로 생성하면 H5 페이지의 URL을 복사하면됩니다. 짧은 링크 서비스를 통해 URL을 서비스에 붙여 넣은 다음 단축 된 URL을 가져와야합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)