svg - 是否可以在不使用 Illustrator 等编辑器的情况下更改 svg 中的线条粗细?

标签 svg

我有这个 svg:

 <?xml version="1.0"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 286.054 286.054" style="enable-background:new 0 0 286.054 286.054;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
    	<path d="M143.027,0C64.031,0,0,64.04,0,143.027c0,78.996,64.031,143.027,143.027,143.027   s143.027-64.031,143.027-143.027C286.054,64.04,222.022,0,143.027,0z M143.027,259.236c-64.183,0-116.209-52.026-116.209-116.209   S78.844,26.818,143.027,26.818s116.209,52.026,116.209,116.209S207.21,259.236,143.027,259.236z" data-original="#2394BC" class="active-path" data-old_color="#2394BC" fill="#999999"/>
    	<path d="M150.026,80.39h-22.84c-6.91,0-10.933,7.044-10.933,13.158c0,5.936,3.209,13.158,10.933,13.158   h7.259v85.36c0,8.734,6.257,13.605,13.176,13.605s13.185-4.881,13.185-13.605V92.771C160.798,85.789,156.945,80.39,150.026,80.39z" data-original="#2394BC" class="active-path" data-old_color="#2394BC" fill="#999999"/>
    </g></g> </svg>

这是一个简单的外圆,中心有一个数字。

enter image description here

我想知道的是是否可以通过编辑源代码来更改外圆的宽度,还是只能使用 Adob​​e illustrator 或类似工具来完成?

最佳答案

正如@enxaneta评论

The paths have no stroke. What you have are filled paths. You may try to add a stroke the the circle the same color as the fill (stroke="#999999") although you can replace the path with a element with no fill and a stroke

Please try <circle r="130" cx="143" cy="143" fill="none" stroke="#999999" stroke-width="25" />
instead of the path and change the stroke-width as you need

enter image description here

如图所示,路径有一个被绘制的双轮廓。
添加一个圆圈代替路径。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px"  viewBox="0 0 286.054 286.054" style="enable-background:new 0 0 286.054 286.054;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
    <circle r="130" cx="143" cy="143" fill="none" stroke="#999999" stroke-width="25"  data-original="#2394BC" class="active-path" data-old_color="#2394BC" />
    <path d="M150.026,80.39h-22.84c-6.91,0-10.933,7.044-10.933,13.158c0,5.936,3.209,13.158,10.933,13.158   h7.259v85.36c0,8.734,6.257,13.605,13.176,13.605s13.185-4.881,13.185-13.605V92.771C160.798,85.789,156.945,80.39,150.026,80.39z" data-original="#2394BC" class="active-path" data-old_color="#2394BC" fill="#999999"/>
</g></g> </svg>

关于svg - 是否可以在不使用 Illustrator 等编辑器的情况下更改 svg 中的线条粗细?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59040273/

相关文章:

svg - 在 SVG 中缩放圆

javascript - d3 中动态矩形和圆形之间的区别?

python - 如何将 python wordcloud 元素传递给 svgwrite 方法以生成 wordcloud 的 svg?

jquery - 将 .SVG 文件的内容插入到 HTML 元素中

javascript - 向折线图添加工具提示未显示

c# - 我可以使用 SkiaSharp 将 SVG 渲染为 PNG 吗?

html - 光标 : pointer; on svg element is not working

javascript - Arc SVG 参数

html - 浏览器之间的 SVG 不一致

javascript - D3 (v3) 在单击另一个圆后重置先前的动画圆