SVG 图像圆圈描边图案正在铬上切割

SVG image circle stroke pattern is being cut on chromium

提问人：Alex Antonov 提问时间：4/29/2023 最后编辑：enxanetaAlex Antonov 更新时间：5/2/2023 访问量：111

问：

我在 chrome/chromium 中渲染 SVG 时遇到了一个疯狂的问题（firefox 按预期工作）。

我想渲染一个带有空填充但包含模板的笔触的圆圈，但由于某种原因，一旦我尝试更改屏幕分辨率，圆圈笔画就会开始主要在底部/右边缘被切断。我无法确定为什么会这样。我想知道我应该怎么做才能防止中风被切断，欢迎任何帮助

更新我不关心IE和其他过时的浏览器。只是现代的

转载链接：https://jsfiddle.net/k8cbq4dv/

附上屏幕截图enter image description here

代码本身：

<div id="root">
    <svg width="100%" viewBox="0 0 40 40" style="background-color: rgb(204, 255, 204);">
        <defs>
            <pattern id="greenglaze" patternUnits="userSpaceOnUse" width="5" height="5">
                <image href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyiQU4yEPR1SIEF1mRiFOP1IMFoQ4s8y0vGJTRhRt4CbE4BaOuFEXrwEDWmI8ngIzbk_c&amp;usqp=CAU" width="5" height="5" preserveAspectRatio="none"></image>
            </pattern>
        </defs>
        <circle cx="20" cy="20" r="12.91549430918954" fill="transparent" transform-origin="center" stroke="url(#greenglaze)" stroke-width="7.9" stroke-dasharray="100 0" stroke-dashoffset="-0" transform="rotate(-90, 0, 0)"></circle>
    </svg>
</div>

html css google-chrome svg 铬

评论

0赞 Robert Longson 4/29/2023
您是否向 Chrome 的错误跟踪器报告了它？
0赞 Alex Antonov 4/29/2023
@RobertLongson你认为这是 chrome 错误？
0赞 enxaneta 4/29/2023
请尝试删除并改用transform-origin="center"transform="rotate(-90, 20, 20)
0赞 Alex Antonov 4/29/2023
@enxaneta它不起作用
0赞 ccprog 4/29/2023
当使用 Chromium 112/Linux Mint 进行测试时，该错误确实只是偶尔出现：堆栈片段始终是正确的，jsFiddle 确实在初始加载时显示它，但在调整输出 iframe 大小时，缺失的模式部分变得可见。

答：

0赞 Danilo Fagundes 4/29/2023 #1

前面的代码并没有真正解决问题。

我的英语不是最好的。

我在这里做了几个测试，我认为解决方案是使用 css。

svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
<div id="root">
  <svg width="100%" viewBox="0 0 40 40" style="background-color: rgb(204, 255, 204);">
    <defs>
      <pattern id="greenglaze" patternUnits="userSpaceOnUse" width="5" height="5">
        <image href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyiQU4yEPR1SIEF1mRiFOP1IMFoQ4s8y0vGJTRhRt4CbE4BaOuFEXrwEDWmI8ngIzbk_c&amp;usqp=CAU" 
               width="5" 
               height="5" 
               preserveAspectRatio="none"></image>
      </pattern>
    </defs>
    <circle cx="20" 
            cy="20" 
            r="12.91549430918954" 
            fill="transparent" 
            transform-origin="center" 
            stroke="url(#greenglaze)" 
            stroke-width="7.9" 
            stroke-dasharray="100 0" 
            stroke-dashoffset="-0" 
            transform="rotate(-90, 0, 0)"></circle>
  </svg>
</div>

评论

0赞 Alex Antonov 4/29/2023
你改变了什么？
0赞 Alex Antonov 4/29/2023
UPD 我扩展了代码片段，解决方案不起作用：imgur.com/a/Cn1yIwl
0赞 Danilo Fagundes 4/29/2023
真的没用，我提出了一个新的解决方案建议
1赞 ccprog 5/1/2023 #2

这只是一个怀疑，所以答案可能仍然不正确。至少对我来说，jsFiddle 错误确实消失了。

可能是 Chromium 在识别最终绘文的边界框时存在问题，因为它必须考虑笔画的宽度。如果它在这一点上以某种方式计算错误，它可能会决定图案的某些重复将始终在有效剪辑路径之外，只是不渲染它们。

然后，解决方案是不使用描边宽度，而是绘制两条组合的圆形路径：

<div id="root">
  <svg width="100%" viewBox="0 0 40 40" style="background-color: rgb(204, 255, 204);">
    <defs>
      <pattern id="greenglaze" patternUnits="userSpaceOnUse" width="5" height="5">
        <image href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyiQU4yEPR1SIEF1mRiFOP1IMFoQ4s8y0vGJTRhRt4CbE4BaOuFEXrwEDWmI8ngIzbk_c&amp;usqp=CAU" width="5" height="5" preserveAspectRatio="none"></image>
      </pattern>
    </defs>
    <path d="M 20 4.135
             A 15.865 15.865 0 0 0 20 35.865
             A 15.865 15.865 0 0 0 20 4.135 z
             M 20 10.035
             A 9.965 9.965 0 0 1 20 29.965
             A 9.965 9.965 0 0 1 20 10.035 z"
          fill="url(#greenglaze)" transform="rotate(-90, 20, 20)" />
    </svg>
</div>

2赞 Keyboard Corporation 5/2/2023 #3

我迟到了，但经过一段时间的检查。据了解，您正在甜甜圈上切口。circle

因为 u 被设置为 ，它会根据窗口大小调整内容大小，并触发图像侧面的剪切。imagepreserveAspectRatio="none"

也许这会有所帮助，也可以没有帮助，但是在您的圈子中使用 stroke-miterlimit 以某种方式解决了这个问题。

<div id="root">
  <svg viewBox="0 0 40 40" style="width: 100%; background-color: rgb(204, 255, 204);">
    <defs>
      <pattern id="greenglaze" patternUnits="userSpaceOnUse" width="5" height="5">
        <image href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyiQU4yEPR1SIEF1mRiFOP1IMFoQ4s8y0vGJTRhRt4CbE4BaOuFEXrwEDWmI8ngIzbk_c&amp;usqp=CAU" width="5" height="5" preserveAspectRatio="none"></image>
      </pattern>
    </defs>
    <circle cx="20" cy="20" r="11" stroke="url(#greenglaze)" fill="transparent" transform-origin="center" stroke="url(#greenglaze)" stroke-miterlimit="30" stroke-width="7px" stroke-dasharray="100 0" stroke-dashoffset="-0" transform="rotate(-90, 0, 0)"/>
  </svg>
</div>

上一个：图像宽度=100% 在嵌套的 flexbox 中在 Firefox 中不起作用

下一个：iframe 阻止自动对焦