SVG 圆形笔划无法正常工作

Posted 2023-03-28

【中文标题】SVG 圆形笔划无法正常工作

【英文标题】：SVG rounded stroke not working properly

【发布时间】：2017-07-21 04:12:30

【问题描述】：

圆角在我的 SVG 中无法正常工作。

请检查以下代码，

<svg height="100" version="1.1" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; left: -0.75px; top: -0.398438px;" viewBox="0 24.61111068725586 473.6666666666667 77.38888549804688" preserveAspectRatio="xMidYMid meet"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.2.0</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path fill="#000000" stroke="#ee0f0f" d="M10.305555555555555,27.41666666666667C10.305555555555555,27.41666666666667,10.305555555555555,-24.888888888888886,10.305555555555555,-24.888888888888886C10.305555555555555,-24.888888888888886,1.166666666666666,-24.888888888888886,1.166666666666666,-24.888888888888886C1.166666666666666,-24.888888888888886,1.166666666666666,-34.02777777777777,1.166666666666666,-34.02777777777777C1.166666666666666,-34.02777777777777,31.5,-34.02777777777777,31.5,-34.02777777777777C31.5,-34.02777777777777,31.5,-24.888888888888886,31.5,-24.888888888888886C31.5,-24.888888888888886,22.75,-24.888888888888886,22.75,-24.888888888888886C22.75,-24.888888888888886,22.75,27.41666666666667,22.75,27.41666666666667C22.75,27.41666666666667,10.305555555555555,27.41666666666667,10.305555555555555,27.41666666666667C10.305555555555555,27.41666666666667,10.305555555555555,27.41666666666667,10.305555555555555,27.41666666666667" transform="matrix(1,0,0,1,-0.0047,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M46.47222222222222,27.41666666666667C46.47222222222222,27.41666666666667,46.47222222222222,-34.02777777777777,46.47222222222222,-34.02777777777777C46.47222222222222,-34.02777777777777,72.13888888888889,-34.02777777777777,72.13888888888889,-34.02777777777777C72.13888888888889,-34.02777777777777,72.13888888888889,-25.47222222222222,72.13888888888889,-25.47222222222222C72.13888888888889,-25.47222222222222,58.91666666666667,-25.47222222222222,58.91666666666667,-25.47222222222222C58.91666666666667,-25.47222222222222,58.91666666666667,-8.749999999999993,58.91666666666667,-8.749999999999993C58.91666666666667,-8.749999999999993,68.25,-8.749999999999993,68.25,-8.749999999999993C68.25,-8.749999999999993,68.25,3.552713678800501e-15,68.25,3.552713678800501e-15C68.25,3.552713678800501e-15,58.91666666666667,3.552713678800501e-15,58.91666666666667,3.552713678800501e-15C58.91666666666667,3.552713678800501e-15,58.91666666666667,18.861111111111114,58.91666666666667,18.861111111111114C58.91666666666667,18.861111111111114,72.13888888888889,18.861111111111114,72.13888888888889,18.861111111111114C72.13888888888889,18.861111111111114,72.13888888888889,27.41666666666667,72.13888888888889,27.41666666666667C72.13888888888889,27.41666666666667,46.47222222222222,27.41666666666667,46.47222222222222,27.41666666666667C46.47222222222222,27.41666666666667,46.47222222222222,27.41666666666667,46.47222222222222,27.41666666666667" transform="matrix(1,0,0,1,-0.0009,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M103.58333333333333,28.58333333333334C82.97222222222221,28.97222222222223,85.5,6.805555555555561,85.69444444444444,-13.416666666666664C85.69444444444444,-27.999999999999993,91.72222222222221,-35.388888888888886,103.58333333333333,-35.388888888888886C117.58333333333333,-35.388888888888886,121.66666666666666,-24.888888888888886,120.69444444444443,-9.527777777777771C120.69444444444443,-9.527777777777771,108.44444444444444,-9.527777777777771,108.44444444444444,-9.527777777777771C108.05555555555554,-16.138888888888886,110,-25.666666666666664,103.58333333333333,-25.666666666666664C99.88888888888889,-25.666666666666664,98.13888888888889,-22.55555555555555,98.13888888888889,-16.52777777777777C98.13888888888889,-16.52777777777777,98.13888888888889,9.916666666666671,98.13888888888889,9.916666666666671C98.13888888888889,15.944444444444448,99.88888888888889,19.05555555555556,103.58333333333333,19.05555555555556C110,19.05555555555556,108.44444444444444,9.138888888888893,108.63888888888889,2.138888888888893C108.63888888888889,2.138888888888893,120.69444444444443,2.138888888888893,120.69444444444443,2.138888888888893C121.27777777777777,17.111111111111114,117.77777777777777,28.19444444444445,103.58333333333333,28.58333333333334C103.58333333333333,28.58333333333334,103.58333333333333,28.58333333333334,103.58333333333333,28.58333333333334" transform="matrix(1,0,0,1,-0.007,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M136.47222222222223,27.41666666666667C136.47222222222223,27.41666666666667,136.47222222222223,-34.02777777777777,136.47222222222223,-34.02777777777777C136.47222222222223,-34.02777777777777,148.91666666666666,-34.02777777777777,148.91666666666666,-34.02777777777777C148.91666666666666,-34.02777777777777,148.91666666666666,-8.944444444444443,148.91666666666666,-8.944444444444443C148.91666666666666,-8.944444444444443,157.86111111111111,-8.944444444444443,157.86111111111111,-8.944444444444443C157.86111111111111,-8.944444444444443,157.86111111111111,-34.02777777777777,157.86111111111111,-34.02777777777777C157.86111111111111,-34.02777777777777,170.30555555555554,-34.02777777777777,170.30555555555554,-34.02777777777777C170.30555555555554,-34.02777777777777,170.30555555555554,27.41666666666667,170.30555555555554,27.41666666666667C170.30555555555554,27.41666666666667,157.86111111111111,27.41666666666667,157.86111111111111,27.41666666666667C157.86111111111111,27.41666666666667,157.86111111111111,3.552713678800501e-15,157.86111111111111,3.552713678800501e-15C157.86111111111111,3.552713678800501e-15,148.91666666666666,3.552713678800501e-15,148.91666666666666,3.552713678800501e-15C148.91666666666666,3.552713678800501e-15,148.91666666666666,27.41666666666667,148.91666666666666,27.41666666666667C148.91666666666666,27.41666666666667,136.47222222222223,27.41666666666667,136.47222222222223,27.41666666666667C136.47222222222223,27.41666666666667,136.47222222222223,27.41666666666667,136.47222222222223,27.41666666666667" transform="matrix(1,0,0,1,0.0008,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M186.47222222222223,27.41666666666667C186.47222222222223,27.41666666666667,186.47222222222223,-34.22222222222222,186.47222222222223,-34.22222222222222C186.47222222222223,-34.22222222222222,195.41666666666666,-34.22222222222222,195.41666666666666,-34.22222222222222C195.41666666666666,-34.22222222222222,208.83333333333331,-1.9444444444444393,208.83333333333331,-1.9444444444444393C208.83333333333331,-1.9444444444444393,208.83333333333331,-34.22222222222222,208.83333333333331,-34.22222222222222C208.83333333333331,-34.22222222222222,219.13888888888889,-34.22222222222222,219.13888888888889,-34.22222222222222C219.13888888888889,-34.22222222222222,219.13888888888889,27.41666666666667,219.13888888888889,27.41666666666667C219.13888888888889,27.41666666666667,210.58333333333331,27.41666666666667,210.58333333333331,27.41666666666667C210.58333333333331,27.41666666666667,197.16666666666666,-6.80555555555555,197.16666666666666,-6.80555555555555C197.16666666666666,-6.80555555555555,197.16666666666666,27.41666666666667,197.16666666666666,27.41666666666667C197.16666666666666,27.41666666666667,186.47222222222223,27.41666666666667,186.47222222222223,27.41666666666667C186.47222222222223,27.41666666666667,186.47222222222223,27.41666666666667,186.47222222222223,27.41666666666667" transform="matrix(1,0,0,1,0.0059,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M253.58333333333337,28.58333333333334C232.97222222222226,28.58333333333334,235.50000000000003,6.611111111111114,235.69444444444446,-13.416666666666664C235.69444444444446,-27.999999999999993,241.5277777777778,-35.388888888888886,253.58333333333337,-35.388888888888886C265.6388888888889,-35.388888888888886,271.6666666666667,-27.999999999999993,271.6666666666667,-13.416666666666664C271.86111111111114,6.805555555555561,274.19444444444446,28.58333333333334,253.58333333333337,28.58333333333334C253.58333333333337,28.58333333333334,253.58333333333337,28.58333333333334,253.58333333333337,28.58333333333334M253.58333333333337,-25.666666666666664C248.91666666666669,-25.47222222222222,248.1388888888889,-21.194444444444443,248.1388888888889,-16.52777777777777C248.1388888888889,-16.52777777777777,248.1388888888889,9.916666666666671,248.1388888888889,9.916666666666671C248.1388888888889,15.944444444444448,249.8888888888889,19.05555555555556,253.58333333333337,19.05555555555556C257.2777777777778,19.05555555555556,259.22222222222223,15.944444444444448,259.22222222222223,9.916666666666671C259.22222222222223,9.916666666666671,259.22222222222223,-16.52777777777777,259.22222222222223,-16.52777777777777C259.22222222222223,-22.55555555555555,257.2777777777778,-25.666666666666664,253.58333333333337,-25.666666666666664C253.58333333333337,-25.666666666666664,253.58333333333337,-25.666666666666664,253.58333333333337,-25.666666666666664" transform="matrix(1,0,0,1,-0.0023,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M286.47222222222223,27.41666666666667C286.47222222222223,27.41666666666667,286.47222222222223,-34.02777777777777,286.47222222222223,-34.02777777777777C286.47222222222223,-34.02777777777777,298.9166666666667,-34.02777777777777,298.9166666666667,-34.02777777777777C298.9166666666667,-34.02777777777777,298.9166666666667,18.861111111111114,298.9166666666667,18.861111111111114C298.9166666666667,18.861111111111114,311.1666666666667,18.861111111111114,311.1666666666667,18.861111111111114C311.1666666666667,18.861111111111114,311.1666666666667,27.41666666666667,311.1666666666667,27.41666666666667C311.1666666666667,27.41666666666667,286.47222222222223,27.41666666666667,286.47222222222223,27.41666666666667C286.47222222222223,27.41666666666667,286.47222222222223,27.41666666666667,286.47222222222223,27.41666666666667" transform="matrix(1,0,0,1,-0.0071,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M343.5833333333333,28.58333333333334C322.97222222222223,28.58333333333334,325.5,6.611111111111114,325.69444444444446,-13.416666666666664C325.69444444444446,-27.999999999999993,331.52777777777777,-35.388888888888886,343.5833333333333,-35.388888888888886C355.6388888888889,-35.388888888888886,361.6666666666667,-27.999999999999993,361.6666666666667,-13.416666666666664C361.8611111111111,6.805555555555561,364.19444444444446,28.58333333333334,343.5833333333333,28.58333333333334C343.5833333333333,28.58333333333334,343.5833333333333,28.58333333333334,343.5833333333333,28.58333333333334M343.5833333333333,-25.666666666666664C338.9166666666667,-25.47222222222222,338.13888888888886,-21.194444444444443,338.13888888888886,-16.52777777777777C338.13888888888886,-16.52777777777777,338.13888888888886,9.916666666666671,338.13888888888886,9.916666666666671C338.13888888888886,15.944444444444448,339.88888888888886,19.05555555555556,343.5833333333333,19.05555555555556C347.27777777777777,19.05555555555556,349.22222222222223,15.944444444444448,349.22222222222223,9.916666666666671C349.22222222222223,9.916666666666671,349.22222222222223,-16.52777777777777,349.22222222222223,-16.52777777777777C349.22222222222223,-22.55555555555555,347.27777777777777,-25.666666666666664,343.5833333333333,-25.666666666666664C343.5833333333333,-25.666666666666664,343.5833333333333,-25.666666666666664,343.5833333333333,-25.666666666666664" transform="matrix(1,0,0,1,0.0063,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M391.25,28.58333333333334C372.5833333333333,28.19444444444445,375.88888888888886,5.44444444444445,375.69444444444446,-13.416666666666664C375.69444444444446,-27.999999999999993,381.72222222222223,-35.388888888888886,393.77777777777777,-35.388888888888886C407.3888888888889,-35.388888888888886,412.25,-25.861111111111107,411.47222222222223,-11.083333333333329C411.47222222222223,-11.083333333333329,399.4166666666667,-11.083333333333329,399.4166666666667,-11.083333333333329C399.4166666666667,-17.694444444444443,400.38888888888886,-25.47222222222222,393.77777777777777,-25.666666666666664C389.88888888888886,-25.666666666666664,388.13888888888886,-22.55555555555555,388.13888888888886,-16.52777777777777C388.13888888888886,-16.52777777777777,388.13888888888886,9.916666666666671,388.13888888888886,9.916666666666671C388.13888888888886,15.944444444444448,389.88888888888886,19.05555555555556,393.77777777777777,19.05555555555556C399.02777777777777,19.05555555555556,399.80555555555554,11.472222222222227,399.4166666666667,4.666666666666671C399.4166666666667,4.666666666666671,392.4166666666667,4.666666666666671,392.4166666666667,4.666666666666671C392.4166666666667,4.666666666666671,392.4166666666667,-4.277777777777775,392.4166666666667,-4.277777777777775C392.4166666666667,-4.277777777777775,411.8611111111111,-4.277777777777775,411.8611111111111,-4.277777777777775C411.8611111111111,-4.277777777777775,411.8611111111111,27.41666666666667,411.8611111111111,27.41666666666667C411.8611111111111,27.41666666666667,403.30555555555554,27.41666666666667,403.30555555555554,27.41666666666667C403.30555555555554,27.41666666666667,401.75,23.138888888888893,401.75,23.138888888888893C400,26.05555555555556,395.72222222222223,28.58333333333334,391.25,28.58333333333334C391.25,28.58333333333334,391.25,28.58333333333334,391.25,28.58333333333334" transform="matrix(1,0,0,1,0.006,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M440.2777777777777,-6.999999999999993C440.2777777777777,-6.999999999999993,446.49999999999994,-34.02777777777777,446.49999999999994,-34.02777777777777C446.49999999999994,-34.02777777777777,457.9722222222222,-34.02777777777777,457.9722222222222,-34.02777777777777C457.9722222222222,-34.02777777777777,446.3055555555555,7.0000000000000036,446.3055555555555,7.0000000000000036C446.3055555555555,7.0000000000000036,446.3055555555555,27.41666666666667,446.3055555555555,27.41666666666667C446.3055555555555,27.41666666666667,434.24999999999994,27.41666666666667,434.24999999999994,27.41666666666667C434.24999999999994,27.41666666666667,434.24999999999994,7.0000000000000036,434.24999999999994,7.0000000000000036C434.24999999999994,7.0000000000000036,422.7777777777777,-34.02777777777777,422.7777777777777,-34.02777777777777C422.7777777777777,-34.02777777777777,434.4444444444444,-34.02777777777777,434.4444444444444,-34.02777777777777C434.4444444444444,-34.02777777777777,440.2777777777777,-6.999999999999993,440.2777777777777,-6.999999999999993" transform="matrix(1,0,0,1,-0.0081,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="none" stroke="none" d="M0,100L1421,100" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg>

有什么帮助吗？？

【问题讨论】：

我怀疑是通过 raphael 创建路径点的方式导致了问题。

应该是什么问题？你能猜到吗？？

我假设您正在使用 raphael 将文本转换为路径。 Raphael 很可能会创建复制 SVG 文本元素的笔触渲染的路径，该路径不能有圆形端盖。

那么有没有其他方法可以做这些事情？

我同时包含了 stroke-linecap="round" 和 stroke-linejoin="round"，并将 stroke-width 增加到 10：这显示为圆形。

【参考方案1】：

您应该生成如下笔画的文本：

<svg viewbox="0 0 100 100">
  <text 
    x="0"
    y="14" 
    font-size="14" 
    font-family="Impact" 
    stroke="red" 
    stroke- 
    stroke-linecap="round" 
    stroke-linejoin="round">
    TECHNOLOGY
  </text>
</svg>

如果您在使用 raphael 或 snap.svg 时遇到问题，您应该发布该代码以便我们提供帮助。