主页 / 问题 / 1139629
Accepted
Floyat
Asked:2020-06-11 18:22:01 +0000 UTC2020-06-11 18:22:01 +0000 UTC

如何在不增加 SVG 元素大小的情况下增加线宽

  • 772

有一个简单的svg

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" color="red">
  <polygon fill="none" stroke-width="4" stroke="red" points="171.14 230.86,200 171.14,230.86 230.86"></polygon>
</svg>

https://jsfiddle.net/y6qdf90v/

如果把笔画的粗细增加5倍，那么会是这样的

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" color="red">
  <polygon fill="none" stroke-width="20" stroke="red" points="171.14 230.86,200 171.14,230.86 230.86"></polygon>
</svg>

https://jsfiddle.net/y6qdf90v/1/

有什么办法可以避免三角形向外扩展？因此，随着厚度的增加，尺寸只会在内部增加。以及如何理解三角形可用的最大线宽是多少？

什么公式可以用来重新计算多边形的位置？这是关于svg 1.1的。我读到 svg 1.2 支持某种属性，但该选项不适合。

вёрстка

1 个回答

  1. Best Answer

    有什么办法可以避免三角形向外扩展？这样当厚度增加时，尺寸只会在内部增加

    三角形的外部尺寸随着stroke-width线粗的增加而增加，这是由于中心线两侧的线粗对称增加。

    有必要从轴向切割线的外部部分，并将内部部分放在一边。

    这个问题可以通过使用两个多边形来解决。一个多边形将作为基础，第二个多边形将作为第一个多边形的蒙版。

    想象一下，您有一个三角形，您可以在其中挤出一个带有较小三角形的三角形孔。由于我们没有增加第一个三角形的线条粗细，所以三角形的整体大小不会增加。

    随着内三角形的减小，线的粗细会增加。

    面具fill="black"穿过一个三角形孔。当stroke="white"线条变得可见时。

    <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"  >
    
   <defs>
   <mask id="msk"> 
    <rect width="100%" height="100%" fill="white" />
     <polygon  id="inner" fill="black" stroke-width="4" stroke="white" points="171.14 230.86,200 171.14,230.86 230.86">
       
     </polygon>
   </mask>  
   
  </defs>  
   <rect width="100%" height="100%" fill="wheat" />
 <!-- Первый треугольник полностью закрашен в красный цвет и к нему применена маска, которая вырезает треугольное отверстие, оставляя видимой только внутреннюю ширину линии  -->    
<polygon id="poly"  mask="url(#msk)" fill="red" stroke="none"  points="171.14 230.86,200 171.14,230.86 230.86"></polygon>
</svg>

    一个动画示例，展示了随着stroke-width遮罩线宽度的增加，线的内部厚度如何增加，而不会增加三角形的整体大小。

    <polygon  id="inner" fill="black" stroke-width="2" stroke="white" points="171.14 230.86,200 171.14,230.86 230.86">
       <animate attributeName="stroke-width" begin="svg1.click" dur="5s" values="2;24" fill="freeze" />
</polygon>

    完整的动画代码

    <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"  >
    
   <defs>
   <mask id="msk"> 
    <rect width="100%" height="100%" fill="white" />
     <polygon  id="inner" fill="black" stroke-width="2" stroke="white" points="171.14 230.86,200 171.14,230.86 230.86">
       <animate attributeName="stroke-width" begin="svg1.click" dur="5s" values="2;24" fill="freeze" />
     </polygon>
   </mask>  
   
  </defs>  
   <rect width="100%" height="100%" fill="wheat" />
  <polygon id="poly"  mask="url(#msk)" fill="red" stroke="none"  points="171.14 230.86,200 171.14,230.86 230.86"></polygon>
</svg>

    该示例显示stroke-width可以增加线条粗细，直到它填满整个三角形。

    选择一个值stroke-width以提供所需的线条粗细。

    • 3

相关问题