GUIDE-H5B2A-CASE-031 - 踏得网

SVG基础知识 - 描边 - 三种线条连接类型示意图（stroke-linejoin）

教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 6885
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<svg width="12cm" height="3.5cm" viewBox="0 0 1200 350" version="1.1"
     xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
  <desc>Example linecap - demonstrates three stroke-linecap values</desc>
  <rect x="1" y="1" width="1198" height="348" fill="none" stroke="blue" />
  <style type="text/css"><![CDATA[
    .thick { stroke:black; stroke-width:70 }
    .thin { stroke:#ffcccc; stroke-width:5 }
    text { text-anchor:middle; font-size:50; font-family:Verdana }
    circle { fill:#ffcccc; stroke:none }
  ]]></style>
  <defs>
    <path id="path1" d="M -125,150 L 0,0 L 125,150" fill="none" />
    <circle id="circle1" cx="0" cy="0" r="8"/>
  </defs>
  <g transform="translate(200,75)">
    <use class="thick" xlink:href="#path1" stroke-linejoin="miter"/>
    <use class="thin" xlink:href="#path1"/>
    <use xlink:href="#circle1"/>
    <text y="230">'miter' join</text>
  </g>
  <g transform="translate(600,75)">
    <use class="thick" xlink:href="#path1" stroke-linejoin="round"/>
    <use class="thin" xlink:href="#path1"/>
    <use xlink:href="#circle1"/>
    <text y="230">'round' join</text>
  </g>
  <g transform="translate(1000,75)">
    <use class="thick" xlink:href="#path1" stroke-linejoin="bevel"/>
    <use class="thin" xlink:href="#path1"/>
    <use xlink:href="#circle1"/>
    <text y="230">'bevel' join</text>
  </g>
</svg>