您可以控制 SVG 描边宽度的绘制方式吗？

Question

目前正在构建一个基于浏览器的 SVG 应用程序。在此应用程序中，用户可以设置各种形状的样式和位置，包括矩形。

当我将 lines-width 应用于 1px 的 SVG rect 元素时，笔划将应用于 rect > 不同浏览器的偏移和插入方式不同。事实证明，这很麻烦，尤其是当我尝试计算矩形的外部宽度和视觉位置并将其放置在其他元素旁边时。

例如：

• Firefox 添加 1px 插入（底部和左侧）和 1px 偏移（顶部和右侧）
• Chrome 添加 1px 插入（顶部和左侧）和 1px 偏移（底部和右侧）

到目前为止我唯一的解决方案是绘制实际的我自己设置边框（可能使用 path 工具）并将边框放置在描边元素后面。但这个解决方案是一个令人不愉快的解决方法，如果可能的话，我不想走这条路。

所以我的问题是，你能控制 SVG 的描边宽度如何在元素上绘制吗？

Answer 1

不可以，您无法指定笔划是在元素内部还是外部绘制。为此，我向 SVG 工作组提出了提案该功能于 2003 年推出，但没有得到支持（或讨论）。

正如我在提案中指出的那样，

• 通过将描边宽度加倍，然后使用剪切路径将对象剪辑到自身，您可以实现与“内部”相同的视觉结果；
• 通过将描边宽度加倍，然后使用剪切路径，您可以实现与“外部”相同的视觉结果将对象的无笔画副本覆盖在其自身之上。

编辑：这个答案将来可能是错误的。使用 SVG 矢量效果应该可以实现这些结果，通过将 veStrokePath 与 veIntersect（用于“内部”）或与 veExclude（用于“外部”）相结合。然而，矢量效果仍然是一个工作草案模块，我还没有找到任何实现。

编辑 2：SVG 2 草案规范包括 笔划-alignment 属性（具有 center|inside|outside 可能值）。该属性最终可能会进入 UA。

编辑 3：有趣又令人失望的是，SVG 工作组已从 SVG 2 中删除了 笔划对齐。您可以看到散文 此处。

Answer 2

我找到了一种简单的方法，它有一些限制，但对我有用：

• 在 defs 中定义形状
• 定义引用形状的剪辑路径
• 使用它并在外部被剪辑时将笔划加倍

这里有一个工作示例：

<svg width="240" height="240" viewBox="0 0 1024 1024">
<defs>
	<path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z"/>
	<clipPath id="clip">
		<use xlink:href="#ld"/>
	</clipPath>
</defs>
<g>
	<use xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="#00D2B8" clip-path="url(#clip)"/>
</g>
</svg>

Answer 3

更新： lines-alignment 属性 于 4 月发布2015 年 1 月 1 日，采用了名为 SVG Strokes 的全新规范。

截至 2015 年 2 月 26 日的 SVG 2.0 编辑草案（可能自 2 月 13 日起） , <删除>stroke-alignment 属性存在 以及值内部、中心（默认）和外部。

它的工作方式似乎与 @Phrogz 和后来的 笔画位置建议。该房产至少从 2011 年就开始规划，但除了注释说

SVG 2 应包含一种指定笔划位置的方法

，它从未在规范中详细说明，因为它被推迟了 - 直到现在，似乎如此。

目前还没有浏览器支持此属性，或者据我所知，支持任何新的 SVG 2 功能，但希望随着规范的成熟，它们会很快支持。这是我个人一直敦促拥有的属性，我真的很高兴它终于出现在规范中。

关于该属性在开放路径和循环上的表现似乎存在一些问题。这些问题很可能会延长跨浏览器的实现时间。但是，当浏览器开始支持此属性时，我将用新信息更新此答案。

Answer 4

您可以使用 CSS 来设置描边和填充顺序的样式。即先描边，再填充，即可得到想要的效果。

MDN 关于 paint-order： https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order

CSS 代码：

paint-order: stroke;

Answer 5

这是一个函数，它将计算您需要添加多少像素（使用给定的笔划）到顶部、右侧、底部和左侧，所有这些都基于浏览器：

var getStrokeOffsets = function(stroke){

        var strokeFloor =       Math.floor(stroke / 2),                                                                 // max offset
            strokeCeil =        Math.ceil(stroke / 2);                                                                  // min offset

        if($.browser.mozilla){                                                                                          // Mozilla offsets

            return {
                bottom:     strokeFloor,
                left:       strokeFloor,
                top:        strokeCeil,
                right:      strokeCeil
            };

        }else if($.browser.webkit){                                                                                     // WebKit offsets

            return {
                bottom:     strokeCeil,
                left:       strokeFloor,
                top:        strokeFloor,
                right:      strokeCeil
            };

        }else{                                                                                                          // default offsets

            return {
                bottom:     strokeCeil,
                left:       strokeCeil,
                top:        strokeCeil,
                right:      strokeCeil
            };

        }

    };

Answer 6

正如上面的人所指出的，您要么必须重新计算笔划路径坐标的偏移量，要么将其宽度加倍，然后遮盖一侧或另一侧，因为不仅 SVG 本身不支持 Illustrator 的笔划对齐，而且 PostScript 也不支持。

Adobe PostScript 手册第二版中的笔划规范指出：
“4.5.1 抚摸：
描边运算符沿着当前路径绘制一条一定粗细的线。对于路径中的每个直线或曲线段，描边会绘制一条以该段为中心且边与该段平行的线。" (强调他们的）

规范的其余部分没有用于偏移线位置的属性。当 Illustrator 让您在内部或外部对齐时，它会重新计算实际路径的偏移（因为它在计算上仍然比叠印路径更便宜）。 .ai 文档中的坐标是参考，而不是光栅化或导出为最终格式的内容，

因为 Inkscape 的本机格式是规范 SVG，因此它无法提供规范所缺乏的功能。

Answer 7

2023 年更新：当前草案将该属性重命名为 < code>lines-align

浏览器支持 2023：

请参阅 caniuse

任何现代浏览器都不支持此 CSS 属性，也不支持
有任何已知的计划来支持它。

类似 Polyfill 的辅助函数

基于之前组合 paint-order、mask 和 clip-path 的方法。
（正如@Xavier Ho
@Jorg Janke）

这个助手/polyfill 实际上复制了 Adob​​e Illustrator 等应用程序的行为。

function emulateStrokeAlign() {
  // if natively supported quit
  let supportsSvgStrokeAlign = CSS.supports("stroke-align", "outer");
  if (supportsSvgStrokeAlign) return false;

  let ns = "http://www.w3.org/2000/svg";
  let strokeAlignmentEls = document.querySelectorAll("*[stroke-align]");

  for (let s = 0, len = strokeAlignmentEls.length; len && s < len; s++) {
    let el = strokeAlignmentEls[s];
    let strokeAlignment = el.getAttribute("stroke-align");

    // create unique ID
    let maskId = `emulateStrokeAlignMask-${s}`;
    let clipId = `emulateStrokeAlignClip-${s}`;
    let fillCloneID = `emulateStrokeAlignFill-${s}`;
    let hasClip = document.getElementById(clipId);
    let hasMask = document.getElementById(maskId);
    let hasFillClone = document.getElementById(fillCloneID);
    
    let strokeWidthData = parseFloat(el.dataset.strokeWidth);
    let fillData = el.dataset.fill;
    
   //reset clip or mask 
    el.removeAttribute("mask");
    el.removeAttribute("clip-path");
    

    // stroke align center - quit
    if (strokeAlignment === "center" && !hasClip && !hasMask) continue;
    
    // get stroke properties
    let style = window.getComputedStyle(el);
    let strokeWidth = strokeWidthData ? strokeWidthData :  parseFloat(style.strokeWidth);
    let fill = fillData ? fillData : style.fill;
    
    
    if(strokeAlignment === "center"){
      el.removeAttribute('fill')
      el.removeAttribute('stroke')
      el.style.strokeWidth = strokeWidth
      el.style.fill = fill
      continue
    }
    
    
    
    let svg = el.closest("svg");

    // if path is not closed - quit
    let type = el.nodeName.toLowerCase();
    let isPath = type === "path";
    let d = el.getAttribute("d");
    let isClosed = d?.match(/z/gi)?.length >= 0 ? true : !isPath ? true : false;

    // open path - quit
    if (!isClosed) continue;

    //create <defs> if not previously appended
    let defs = svg.querySelector("defs");
    if (!defs) {
      defs = document.createElementNS(ns, "defs");
      svg.insertBefore(defs, svg.children[0]);
    }


    // if element has fill - clone element
    let hasFill = style.fill !== "none";
    if (!hasFillClone && hasFill) {
      let cloneFill = el.cloneNode(true);
      cloneFill.removeAttribute("stroke");
      cloneFill.removeAttribute("stroke-align");
      cloneFill.style.stroke = "none";
      cloneFill.id = fillCloneID;
      el.parentNode.insertBefore(cloneFill, el);
    }

    // create clone for mask or clip path
    let cloneMaskElID = `emulateStrokeAlignMaskClone-${s}`;
    let cloneMaskEl = document.getElementById(cloneMaskElID);
    if (!cloneMaskEl) {
      cloneMaskEl = el.cloneNode(true);
      cloneMaskEl.id = cloneMaskElID;
      cloneMaskEl.removeAttribute("stroke-align");
      cloneMaskEl.setAttribute("fill-rule", "evenodd");
      cloneMaskEl.removeAttribute("fill");
      cloneMaskEl.removeAttribute("stroke-width");
      cloneMaskEl.removeAttribute("stroke");
      cloneMaskEl.style.stroke = '#fff'
      cloneMaskEl.style.strokeWidth = strokeWidth * 2+'px';
      cloneMaskEl.style.fill = '#000';
      cloneMaskEl.style.paintOrder = "stroke";

    }

    let cloneCliplID = `emulateStrokeAlignClipClone-${s}`;
    let cloneClipEl = document.getElementById(cloneCliplID);
    if (!cloneClipEl) {
      cloneClipEl = el.cloneNode(true);
      cloneClipEl.id = cloneCliplID;
      cloneClipEl.removeAttribute("stroke-align");
      cloneClipEl.removeAttribute("stroke-width");
      cloneClipEl.removeAttribute("fill");
      cloneClipEl.removeAttribute("stroke");
      cloneClipEl.style.clipRule="evenodd";
      cloneClipEl.style.removeProperty("stroke");
      cloneClipEl.style.removeProperty("fill");
      cloneClipEl.style.removeProperty("stroke-width");

    }
    

    if (strokeAlignment === "outer") {
      // create mask if not previously added
      let maskEl = document.getElementById(maskId);

      if (!maskEl) {
        maskEl = document.createElementNS(ns, "mask");
        maskEl.id = maskId;
        maskEl.setAttribute("maskUnits", "userSpaceOnUse");
        maskEl.append(cloneMaskEl);
        defs.append(maskEl);
      } 
      el.setAttribute("mask", `url(#${maskId})`);
    }

    if (strokeAlignment === "inner") {
      //create clipPath
      let clipEl = document.getElementById(clipId);
      //console.log(clipId, clipEl)
      if (!clipEl) {
        clipEl = document.createElementNS(ns, "clipPath");
        clipEl.id = clipId;
        clipEl.append(cloneClipEl);
        defs.append(clipEl);
      }

      el.setAttribute("clip-path", `url(#${clipId})`);
    }

    el.style.strokeWidth = strokeWidth * 2+'px';
    /**
     * save stroke width in data attribute
     * for toggling
     */
    if (!strokeWidthData) el.dataset.strokeWidth = strokeWidth;
    if (!fillData) el.dataset.fill = fill;
  }
}

body{
  font-family: sans-serif;
}

svg {
  display: block;
  outline: 1px solid #ccc;
  overflow: visible;
}

svg>text,
svg>circle,
svg>path{
  fill:#ccc;
  stroke: red;
  stroke-opacity:1;
}

label{
  user-select:none;
}

<fieldset>
  <legend>Stroke-align</legend>
  <label ><input class="inputAlign" type="radio" name="strokeAlign" value="center" checked>center (default)</label>
  <label ><input class="inputAlign" type="radio" name="strokeAlign" value="inner" >inner</label>
  <label ><input class="inputAlign" type="radio" name="strokeAlign" value="outer" >outer</label>
</fieldset>

<svg viewBox="0 0 2400 320">
  
  <!-- open path - do nothing! -->
  <path d="M 10 150
c 50 -50 100 -50 150 0
s 100 50 150 0" stroke-width="16" stroke-align="center"/>
  
  <!-- stroked path - open - do nothing!  -->
  <path
d="M 360 10
l 300 150
l -300 150" stroke-dasharray="50 50" stroke-width="16" stroke-align="center" />
  
  
  <!-- loop path -->
  <path 
d="M 850 20
c -200 0 29.9 398.2 129.9 225
s -359.8 -173.2 -259.8 0
s 329.9 -225 129.9 -225
z" stroke-width="16" stroke-align="center" fill-rule="evenodd"/>
  
  <!-- compound path -->
  <path
d="M 1200 10
a 150 150 0 110 300
a 150 150 0 110 -300
z
m 0 100
a 50 50 0 100 100
a 50 50 0 100 -100
z
"  stroke-width="16" stroke-align="center" fill="#ccc" />
  
  
  <!-- compound path with self intersecting inner -->
  <path
d="M 1600 10
a 150 150 0 110 300
a 150 150 0 110 -300
z
M 1605 70
c -120 0 17.94 238.92 77.94 135
s -215.88 -103.92 -155.88 0
s 197.94 -135 77.94 -135
z
"  stroke-width="16" stroke-align="center" fill="#ccc" />
  
  
  <circle cx="1950" cy="160" r="140" stroke-width="16" stroke-align="center"/>
  
  <text x="2150" y="290" font-size="320" font-weight="700" stroke-width="16" stroke-align="center">8</text>
  
</svg>


<script>
// sample UI
window.addEventListener('DOMContentLoaded', e=>{

let inputAlign = document.querySelectorAll(".inputAlign");
let strokeAlignmentEls = document.querySelectorAll("*[stroke-align]");

inputAlign.forEach((inp) => {
  inp.addEventListener("input", (e) => {
    let align = document.querySelector(".inputAlign:checked").value;

    //change alignment
    setStrokeAlign(strokeAlignmentEls, align);

    // emulate
    emulateStrokeAlign();
  });
});

function setStrokeAlign(els, align) {
  els.forEach((el) => {
    el.setAttribute("stroke-align", align);
  });
}

})
</script>

通过 paper.js offset glenzli 插件 进行硬编码偏移

这种方法实际上会增大/缩小你的 元素来获取所需的笔划位置（使用默认的中间笔划对齐）。

const canvas = document.createElement("canvas");
canvas.style.display='none';
document.body.appendChild(canvas);
//const canvas = document.querySelector("canvas");
paper.setup(canvas);

let strokeEls = document.querySelectorAll("*[stroke-alignment]");
strokeEls.forEach((el,i) => {
  let type = el.nodeName;
  let style = window.getComputedStyle(el);
  let strokeWidth = parseFloat(style.strokeWidth);
  let strokeAlignment = el.getAttribute('stroke-alignment');
  let offset = strokeAlignment==='outer' ? strokeWidth/2 : (strokeAlignment==='inner' ? strokeWidth / -2 : 0); 
  // convert primitive
  if(type!=='path'){
    el = convertPrimitiveToPath(el);
  }
  let d = el.getAttribute("d");
  let polyPath = new paper.Path(el.getAttribute("d"));
  let dOffset = offset ? PaperOffset.offset(polyPath, offset)
    .exportSVG()
    .getAttribute("d") : d;
  el.setAttribute("d", dOffset);
});

body{
  margin:2em;
}

svg{
  width:100%;
  overflow:visible;
  border:1px solid #ccc;
}

<svg viewBox="0 0 12 6" xmlns="http://www.w3.org/2000/svg" stroke-width="0.5">
  <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter"/>
  <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" fill="none" stroke-linejoin="miter" stroke-alignment="outer" stroke="red" stroke-opacity="0.5" />
  <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="round" />
  <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" fill="none" stroke-linejoin="round" stroke-alignment="inner" stroke="red" stroke-opacity="0.5" />
</svg>

<script src="https://unpkg.com/[email protected]/dist/paper-full.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/paperjs-offset.js"></script>

然而，图书馆在处理复杂的形状方面遇到了困难。

SVG 草稿文档中非常令人困惑的是关于几个“边缘情况”（例如开放或自相交路径）的问题注释。
事实上，SVG 功能应该适应开发人员/设计师已经从 Adob​​e Illustrator、Affinity Designer、Figma 等应用程序中了解的常见行为。

我还在 SVGWG github 存储库中发表了评论。
“‘笔画对齐’属性问题：为什么不调整图形应用程序的行为？”

Answer 8

这是使用 symbol 和 use 解决内边框 rect 的方法。

示例：https://jsbin.com/yopemiwame/edit?html,输出

SVG：

<svg>
  <symbol id="inner-border-rect">
    <rect class="inner-border" width="100%" height="100%" style="fill:rgb(0,255,255);stroke-width:10;stroke:rgb(0,0,0)">
  </symbol>
  ...
  <use xlink:href="#inner-border-rect" x="?" y="?" width="?" height="?">
</svg>

注意：请务必将use中的?替换为实际值。

背景：之所以有效，是因为symbol通过用svg替换symbol并在shadow DOM中创建一个元素来建立一个新的视口。然后，影子 DOM 的 svg 会链接到您当前的 SVG 元素。请注意，svg 可以嵌套，并且每个 svg 都会创建一个新视口，该视口会剪辑重叠的所有内容，包括重叠边框。有关正在发生的事情的更详细概述，请阅读 Sara Soueidan 撰写的这篇精彩文章。

Answer 9

我不知道这会有多大帮助，但就我而言，我只是创建了另一个仅带有边框的圆圈并将其放置在另一个形状的“内部”。

Answer 10

一个（肮脏的）可能的解决方案是使用模式，

这里是一个带有内部描边三角形的示例：

https://jsfiddle .net/qr3p7php/5/

<style>
#triangle1{
  fill: #0F0;
  fill-opacity: 0.3;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 20;
}
#triangle2{
  stroke: #f00;
  stroke-opacity: 1;
  stroke-width: 1;
}    
</style>

<svg height="210" width="400" >
    <pattern id="fagl" patternUnits="objectBoundingBox" width="2" height="1" x="-50%">
        <path id="triangle1" d="M150 0 L75 200 L225 200 Z">
    </pattern>    
    <path id="triangle2" d="M150 0 L75 200 L225 200 Z" fill="url(#fagl)"/>
</svg>

Answer 11

Xavier Ho 提出的将笔画宽度加倍并更改绘画顺序的解决方案非常出色，尽管只有在以下情况下才有效：填充是纯色，没有透明度。

我开发了其他方法，更复杂但适用于任何填充。它也适用于椭圆或路径（后者有一些具有奇怪行为的极端情况，例如与自身交叉的开放路径，但不多）。

诀窍是在两层中显示形状。一个没有描边（仅填充），另一个仅具有双倍宽度描边（透明填充），并通过显示整个形状的蒙版，但隐藏没有描边的原始形状。

  <svg width="240" height="240" viewBox="0 0 1024 1024">
  <defs>
    <path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z"/>
    <mask id="mask">
      <use xlink:href="#ld" stroke="#FFFFFF" stroke-width="160" fill="#FFFFFF"/>
      <use xlink:href="#ld" fill="#000000"/>
    </mask>
  </defs>
  <g>
    <use xlink:href="#ld" fill="#00D2B8"/>
    <use xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="red" mask="url(#mask)"/>
  </g>
  </svg>

Answer 12

我发现的最简单的方法是将剪辑路径添加到圆圈中

添加 clip-path="circle()"

然后描边宽度=“5 ” “ 会神奇地变成内在5 像素描边，绝对半径 100 像素。

Answer 13

这对我有用：

.btn {
 border: 1px solid black;
 box-shadow: inset 0 0 0 1px black;
}

Answer 14

自从我自己寻找解决方案以来，我已经阅读了本主题中的答案。就我而言，我无法内联编辑 SVG，因此我需要使用外部 CSS 绘制笔画。这样做将使描边不完全可见，因为它是在路径的外部绘制的。路径变得比视图框更大，因此它将被隐藏。

解决此问题的一个简单方法是将 overflow:visible; 放在 svg 本身上。您可以添加描边宽度一半大小的填充，以使其达到原始大小。

svg {
  width: 80px;
  height: 80px;
  
  fill: transparent;
  
  & > * {
    stroke: black;
    stroke-width: 10px;
  }
}

svg.stroke-visible {
  overflow: visible;
  padding: 5px; //Half the stroke-width
}

Stroke not fully visible:
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="800" height="800" version="1.0" viewBox="0 0 64 64">
<path d="M62.799 23.737a3.941 3.941 0 0 0-3.139-2.642l-16.969-2.593-7.622-16.237a3.938 3.938 0 0 0-7.13 0l-7.623 16.238-16.969 2.593a3.937 3.937 0 0 0-2.222 6.642l12.392 12.707-2.935 17.977a3.94 3.94 0 0 0 5.797 4.082l15.126-8.365 15.126 8.365a3.94 3.94 0 0 0 5.796-4.082l-2.935-17.977 12.393-12.707a3.942 3.942 0 0 0 .914-4.001z"/>
 </svg>
 
 Stroke fully visible:
 
 <svg class="stroke-visible" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="800" height="800" version="1.0" viewBox="0 0 64 64">
<path d="M62.799 23.737a3.941 3.941 0 0 0-3.139-2.642l-16.969-2.593-7.622-16.237a3.938 3.938 0 0 0-7.13 0l-7.623 16.238-16.969 2.593a3.937 3.937 0 0 0-2.222 6.642l12.392 12.707-2.935 17.977a3.94 3.94 0 0 0 5.797 4.082l15.126-8.365 15.126 8.365a3.94 3.94 0 0 0 5.796-4.082l-2.935-17.977 12.393-12.707a3.942 3.942 0 0 0 .914-4.001z"/>
 </svg>