淘先锋技术网

首页 1 2 3 4 5 6 7

问题:ctrl+F无法实现对svg里面的文本搜索并且高亮显示;

解决:最终通过JS实现了本搜索功能,发布源代码如下:

第一步,把代码保存为.html格式;第二步,使用chrom浏览器打开,在文本框输入待搜索字符,点击按钮搜索即可。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>3692-DMD|NM_004006</title>
</head>
<body id="body" οnscrοll="scrollBodyWindows()">
<div style="position:fixed;filter:alpha(Opacity=80);opacity:0.4;background-color:#ffffff;">
<input type="text" id="searchstr" name="searchstr" class="textbox" size="15">
<input type="button" value="find" οnclick="javascript:findIt();" class="sbttn">
</div>
<svg width="84558" height="1074" style="border-style:solid;border-width:0;" xmlns="http://www.w3.org/2000/svg">
<text fill="#000000" transform="matrix(1 0 0 1 200 60)" font-family="Courier New" font-size="10">TCCTGGCATCAGTTACTGTGTTGACTCACTCAGTGTTGGGATCACTCACTTTCCCCCTACAGGACTCAGATCTGGGAGGCAATTACCTTCGGAGAAAAACGAATAGGAAAAACTGAAGTGTTACTTTTTTTAAAGCTGCTGAAGTTTGTTGGTTTCTCATTGTTTTTAAGCCTACTGGAGCAATAAAGTTTGAAGAACTTTTACCAGGTTTTTTTTATCGCTGCCTTGATATACACTTTTCAAAATGCTTTGGTGGGAAGAAGTAGA</text>
<text fill="#000000" transform="matrix(1 0 0 1 200 100)" font-family="Courier New" font-size="10">TCCTGGCATCAGTTACTGTGTTGACTCACTCAGTGTTGGGATCACTCACTTTCCCCCTACAGGACTCAGATCTGGGAGGCAATTACCTTCGGAGAAAAACGAATAGGAAAAACTGAAGTGTTACTTTTTTTAAAGCTGCTGAAGTTTGTTGGTTTCTCATTGTTTTTAAGCCTACTGGAGCAATAAAGTTTGAAGAACTTTTACCAGGTTTTTTTTATCGCTGCCTTGATATACACTTTTCAAAATGCTTTGGTGGGAAGAAGTAGA</text>
</svg><br>


<script language="javascript"> 
function findIt()
{
if (document.getElementById("searchstr").value != "")
{
str=document.getElementById("searchstr").value;
//alert(str); 
str=str.replace(/\s+/g,""); 
//alert(str); 
if(window.find(str,false,false,true))
{
return true;
}
}
else
{
alert("error. find null value"); 
}
}
</script>


</body></html>