来自.svg图像的字母数字检测

时间：2015-03-30 15:48:06

标签： javascript css svg

想知道是否有人遇到类似我的问题，并且有一些他们可以分享的解决方案。

我有一个.svg看起来有点像下图。

enter image description here

我的目标是提取ID＆＃34; 1214A＆＃34;以及来自此.svg图像的类似格式的任何其他唯一ID。 （仅显示图片样本，图片中还有其他ID，ID也在椭圆形内。）

以下是.svg的样子。

http://jsfiddle.net/rayshinn/1wgob3qu/ 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="692px" height="924px" viewBox="0 0 692 924" overflow="inherit" xml:space="preserve">
<rect x="352.62" y="456.78" fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="10.2" height="8.159"/>
<path fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
    M362.82,456.78"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    352.62,464.939 362.82,464.939 352.62,471.061 352.62,464.939 362.82,471.061 352.62,471.061 "/>
<polygon fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    355.5,453.42 355.5,456.78 362.82,456.78 362.82,440.46 346.5,440.46 346.5,447.78 349.859,447.78 "/>
<rect x="325.26" y="475.02" fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="8.88" height="8.762"/>
<rect x="362.82" y="456.78" fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="0.84" height="14.279"/>
<path fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
    M362.82,471.061"/>
<rect x="362.82" y="440.46" fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="0.84" height="16.32"/>
<path fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
    M362.82,456.78"/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="362.82" y1="471.061" x2="362.82" y2="464.939"/>
<rect x="362.82" y="440.46" fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="4.08" height="23.28"/>
<path fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
    M366.9,463.74"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    345.78,452.82 346.26,452.82 346.5,453.06 346.62,453.3 346.5,453.54 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="345.78" y1="452.82" x2="343.38" y2="455.34"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    343.38,455.82 343.26,455.58 343.38,455.34 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="343.38" y1="455.82" x2="343.62" y2="456.06"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    346.5,453.54 344.1,456.06 343.86,456.18 343.62,456.06 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="346.5" y1="453.06" x2="346.98" y2="453.06"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    344.46,459.18 343.5,457.86 343.02,456.42 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    344.94,458.7 344.1,457.62 343.62,456.3 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    346.98,453.06 347.58,453.3 349.26,454.5 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    343.26,455.94 343.5,456.06 343.62,456.3 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    343.02,456.42 343.02,456.06 343.26,455.94 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="347.82" y1="460.5" x2="347.34" y2="460.74"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    347.46,460.02 347.7,460.14 347.82,460.5 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    349.26,454.5 350.46,456.18 350.7,456.78 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    347.46,460.02 346.14,459.66 344.94,458.7 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    347.34,460.74 345.78,460.26 344.46,459.18 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="350.7" y1="456.78" x2="350.7" y2="457.26"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    347.7,460.14 347.58,459.9 347.7,459.66 350.1,457.26 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="347.939" y1="460.38" x2="347.7" y2="460.14"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    348.42,460.38 348.18,460.5 347.939,460.38 "/>
<line fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="350.82" y1="457.98" x2="348.42" y2="460.38"/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    350.1,457.26 350.34,457.14 350.58,457.26 350.82,457.5 350.939,457.74 350.82,457.98 "/>
<polygon fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    346.86,448.14 346.86,451.02 352.26,456.42 355.141,456.42 355.141,453.54 349.74,448.14 "/>
<polyline fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    334.14,483.78 338.58,483.78 338.34,482.46 337.74,481.26 336.78,480.3 335.46,479.58 334.14,479.34 335.46,479.22 336.78,478.5 
    337.74,477.54 338.34,476.34 338.58,475.02 334.14,475.02 "/>
<rect x="325.26" y="462.78" fill="none" stroke="#010101" stroke-width="0.36" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="6.12" height="12.238"/>
<line fill="none" stroke="#BBBBBB" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="330.18" y1="472.5" x2="331.38" y2="475.02"/>
<line fill="none" stroke="#010101" stroke-width="0.36" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="331.74" y1="471.54" x2="331.74" y2="465.78"/>
<path fill="none" stroke="#010101" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
    M348.779,461.94h0.36l0.119,0.119h0.12v0.12h0.12c0.596,0.552-0.116,0.049,0.479,0.601v0.12h0.119v0.24l0.121,0.119v0.12h0.119v0.24
    l0.12,0.12v0.119l0.12,0.12v0.24l0.12,0.119v0.36l0.12,0.12v0.239l0.118,0.119v0.48l0.121,0.239v0.479l0.119,0.12v0.479l0.12,0.24
    v0.84l0.12,0.119v0.36c0,0.521,0,1.04,0,1.56v1.08c0,0.44,0,0.881,0,1.32v0.358l-0.12,0.121v0.959l-0.12,0.121v0.479l-0.119,0.239
    v0.479l-0.121,0.12v0.479l-0.118,0.119v0.24l-0.12,0.24v0.239l-0.12,0.119v0.24l-0.12,0.121v0.119l-0.12,0.12v0.239l-0.119,0.12
    v0.119H350.1v0.24l-0.239,0.24v0.121h-0.119v0.119l-0.36,0.36h-0.12v0.119h-0.239l-0.119,0.121h-0.36V479.1h-0.24v-0.118h-0.12
    l-0.6-0.602v-0.12l-0.12-0.119v-0.121l-0.239-0.238v-0.24l-0.12-0.12v-0.24l-0.12-0.118v-0.121l-0.12-0.119v-0.24l-0.12-0.12v-0.359
    l-0.12-0.119v-0.48l-0.12-0.12V474.9l-0.12-0.121V474.3l-0.12-0.239v-0.841l-0.119-0.239v-1.561l-0.12-0.24v-1.319l0.12-0.119
    v-1.681l0.119-0.239v-0.12c-0.065-1.05,0.167-0.518,0.12-1.32l0.12-0.239v-0.479l0.12-0.12v-0.479l0.12-0.12V464.7l0.12-0.12v-0.36
    l0.12-0.12v-0.118l0.12-0.121v-0.239l0.12-0.12v-0.12l0.119-0.12v-0.119l0.12-0.12v-0.12h0.12v-0.24h0.12v-0.12l0.36-0.36h0.118
    v-0.119h0.12v-0.12L348.779,461.94"/>
<polyline fill="#010101" points="349.62,465.3 349.62,465.061 349.141,465.061 349.26,465.061 349.26,465.3 349.38,465.3 
    349.38,465.54 349.5,465.54 349.5,465.66 349.62,465.66 349.62,465.78 "/>
<polyline fill="#010101" points="350.221,466.141 350.221,465.78 350.1,465.78 349.74,465.42 349.74,465.3 349.62,465.3 
    349.62,465.78 347.34,465.78 347.34,466.141 "/>
<path fill="#010101" d="M349.98,468.78v-0.841v0.239l-0.121,0.12v0.12h-0.119v0.12h-0.48l-0.119-0.12h-0.121v-0.12H348.9v-0.12
    h-0.121v-0.119h-0.119v-0.12h-0.12v-0.119c-0.2-0.2-0.399-0.4-0.601-0.602h-0.119v-0.12h-0.12l-0.12-0.118h-0.24v1.92h0.36v-1.44
    v0.12h0.12l0.239,0.24l0.119,0.119l0.12,0.12v0.119h0.12v0.12h0.12v0.12h0.12v0.12l0.119,0.12h0.121v0.12h0.239v0.12h0.601
    l0.119-0.12"/>
<polyline fill="#010101" points="350.221,467.939 350.221,467.58 350.1,467.46 350.1,467.34 349.98,467.34 349.98,467.22 
    349.859,467.22 349.74,467.1 349.38,467.1 349.38,467.46 349.74,467.46 349.74,467.58 349.859,467.58 349.859,467.7 349.98,467.7 
    349.98,468.78 349.98,468.66 350.1,468.66 350.1,468.54 350.221,468.54 350.221,468.061 "/>
<polyline fill="#010101" points="349.62,469.859 349.62,469.62 349.141,469.62 349.26,469.62 349.26,469.859 349.38,469.859 
    349.38,470.1 349.5,470.1 349.5,470.22 349.62,470.22 349.62,470.34 "/>
<polyline fill="#010101" points="350.221,470.7 350.221,470.34 350.1,470.34 349.98,470.22 349.859,470.1 349.74,469.98 
    349.74,469.859 349.62,469.859 349.62,470.34 347.34,470.34 347.34,470.7 "/>
<polyline fill="#010101" points="350.221,473.1 350.221,472.859 348.42,471.42 348.061,471.42 348.061,472.74 347.34,472.74 
    347.34,473.1 348.061,473.1 348.061,473.46 348.42,473.46 348.42,471.78 349.74,472.74 "/>
<polyline fill="#010101" points="350.221,473.1 349.74,472.74 348.42,472.74 348.42,471.78 348.42,473.1 "/>
<polyline fill="#010101" points="350.221,475.26 350.221,474.78 347.34,473.7 347.34,474.061 348.18,474.42 348.18,475.62 
    348.54,474.54 349.38,474.9 349.74,474.9 349.74,475.02 349.98,475.02 "/>
<polyline fill="#010101" points="350.221,475.26 349.98,475.02 349.74,475.02 349.74,475.141 349.5,475.141 349.38,475.26 
    348.54,475.5 348.54,474.54 348.18,475.62 347.34,475.98 347.34,476.46 "/>
</svg>

此.svg图像是使用Adobe Illustrator导出功能从PDF到.svg自动生成的。

有没有办法使用Javascript在这张图片中提取ID并将其存储到某个数组？

感谢您的阅读，非常感谢任何起点或任何形式的帮助！

1 个答案:

答案 0 :(得分：0)

正如@ austin-mullins所说，可能是PDF包含原始文本，这将更容易提取。然而，这个样本看起来像是来自CAD绘图，所以我怀疑它可能没有。

另一种方法是从他们的定义中识别字符。例如数字＆＃34; 1＆＃34; （在90度）是以下元素：

<polyline fill="#010101"
          points="350.221,466.141 350.221,465.78 350.1,465.78 349.74,465.42
                  349.74,465.3 349.62,465.3 349.62,465.78 347.34,465.78
                  347.34,466.141"></polyline>

如果从折线中的每组坐标中减去初始点（350.221,466.141），您应该能够识别其他＆＃34; 1＆＃34;文档中的字符。至少90度的那些。

这应该适用于整个文件。如果您需要，提取的字符模板甚至可以用于其他文档。

相关问题
最新问题