SVG 属性 vector-effect="non-scaling-stroke" 仍然缩放笔触答案

【问题标题】：SVG property vector-effect="non-scaling-stroke" still scales strokeSVG 属性 vector-effect="non-scaling-stroke" 仍然缩放笔触
【发布时间】：2018-12-07 23:43:38
【问题描述】：

在SVG 中，我需要PATH 笔画宽度保持不变，而viewBox 属性正在更改。 SVG 属性 vector-effect="non-scaling-stroke" 应该可以实现这一点，但它并没有像预期的那样工作。

有人可以解释为什么在下面的代码中（检查codepen.io），随着视图框的变化，笔画宽度仍然会增加吗？我也很欣赏一种解决方案，它可以使笔划宽度保持不变，而不管视图框如何。

https://codepen.io/anon/pen/eKQrYL

HTML

<div class="Item">
  <div class="Item-graphic">
    <svg id='scaling-stroke' width="200" height="200" viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="20" fill="none" stroke="#fff" stroke-width="2"/>
      <path d="M25 15 L 25 35" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
      <path d="M15 25 L 35 25" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
    </svg>
  </div>
  <span>
    50 x 50 view box<br>
    200 x 200 dimensions<br>
    no vector effect
  </span>
</div>
<div class="Item">
  <div class="Item-graphic">
    <svg id='non-scaling-stroke' width="200" height="200" viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="20" fill="none" stroke="#fff" stroke-width="2" vector-effect="non-scaling-stroke"/>
      <path d="M25 15 L 25 35" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
      <path d="M15 25 L 35 25" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
    </div>
  </svg>
  <span>
    50 x 50 view box<br>
    200 x 200 dimensions<br>
    vector effect
  </span>
</div>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: #2196F3;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  line-height: 1.5;
}

svg {
  display: block;
  margin: 0 auto;
}

.Item {
  flex: 0 0 200px;
  padding: 0 1rem;
  color: rgba(#fff, 0.6);
  font-size: 11px;
  text-align: center;
}

.Item-graphic {
  display: flex;
  align-items: center;
  height: 220px;
}

n=1;inc=1;
cvb = function(){
  vb = '' + n
  vb += ' ' + n
  vb += ' ' + 2*(25-n)
  vb += ' ' + 2*(25-n)
  $('#non-scaling-stroke').attr('viewBox', vb)
  $('#scaling-stroke').attr('viewBox', vb)
  n += inc;
  if (n<=1 || n>=24) inc *= -1;
  setTimeout(cvb, 100);
}; 
cvb()

【问题讨论】：

可能是 chrome 错误。它不会发生在 Firefox 上。
你是对的。它适用于 FireFox 和 Safari。 Chrome 似乎有一个错误，Microsoft Edge 似乎甚至不支持非缩放笔画。

标签： html svg image-scaling

【解决方案1】：

这是 Chrome 中的一个错误。错误报告在这里https://bugs.chromium.org/p/chromium/issues/detail?id=849080。它已在 Chrome 版本 68.0.3440.25 中修复。

【讨论】：