Html SVG属性矢量效果=“矢量效果”；“非标度冲程”；静止天平笔划

在

SVG

中，我需要

路径

笔划宽度保持不变，而

viewBox

属性正在更改。SVG属性

vector effect=“non-scaling stroke”

应该可以实现这一点，但它并没有按照预期工作

有人能解释为什么在下面的代码中（勾选）笔划宽度仍然随着viewbox的更改而增加吗？我还希望有一个解决方案，使笔划宽度恒定，而不考虑viewbox

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>

JS

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() 

n=1；inc=1；
cvb=函数（）{
vb=''+n
vb+=''''+n
vb+=''+2*（25-n）
vb+=''+2*（25-n）
$（“#非缩放笔划”）.attr（'viewBox'，vb）
$（“#缩放笔划”）.attr（'viewBox'，vb）
n+=inc；
如果（n=24）inc*=-1；
设置超时（cvb，100）；
}; 
cvb（）

这是Chrome中的一个bug。错误报告在这里。它在Chrome版本68.0.3440.25中被修复。

可能是Chrome的错误。这在Firefox上不会发生，你是对的。它正在开发FireFox和Safari。Chrome似乎有一个bug，而微软Edge似乎甚至不支持非缩放笔划。

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()