如何将位图形式的SVG数字9转换为可读数字？（附Demo）

问题描述 #

• 现有一个通过点阵路径绘制数字9的SVG，需要将其转换为真实可读的文本数字9
• 原SVG中的数字颜色过淡，辨识度低

解决方案 #

方案1：替换为SVG文本元素（推荐） #

直接使用SVG的<text>元素添加数字9，代码简洁且能作为文本直接读取，样式调整也更灵活：

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 1066.6667 800"
   height="800"
   width="1066.6667"
   xml:space="preserve"
   id="svg2"
   version="1.1">
<metadata
     id="metadata8">
<rdf:RDF>
<cc:Work
         rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
     id="defs6" />
<!-- 文本数字9，位置、大小、样式可按需调整 -->
<text x="250" y="400" font-size="200" fill="#000000" font-weight="bold">9</text>
</svg>

方案2：优化原点阵路径的显示效果 #

若需保留点阵样式，可通过调整描边参数提升辨识度：

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 1066.6667 800"
   height="800"
   width="1066.6667"
   xml:space="preserve"
   id="svg2"
   version="1.1">
<metadata
     id="metadata8">
<rdf:RDF>
<cc:Work
         rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
     id="defs6" />
<g
     transform="matrix(1.3333333,0,0,-1.3333333,0,800)"
     id="g10">
<path
       id="path20"
       style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
       d="m 294.09,426.05 -0.46,-1.38 -0.92,-0.92 -1.38,-0.46 h -0.46 l -1.37,0.46 -0.92,0.92 -0.46,1.38 v 0.46 l 0.46,1.37 0.92,0.92 1.37,0.46 h 0.46 l 1.38,-0.46 0.92,-0.92 0.46,-1.83 v -2.3 l -0.46,-2.29 -0.92,-1.38 -1.38,-0.46 h -0.91 l -1.38,0.46 -0.46,0.92" />
</g>
</svg>

说明 #

• 方案1的文本元素支持直接选中、复制，完全满足“可读真实数字”的需求
• 方案2仅优化显示效果，仍为点阵路径形式，无法作为文本读取

内容的提问来源于stack exchange，提问作者Buzz Su