svg掩码文本动态

具有纹理的svg文本。有必要动态更改文本并保留纹理。在firefox中效果很好，chrome则不然

Html代码：

<input type="text" id="text" maxlength="15" value="some text">    
  <svg height="295" width="570" id="svg_text">
   <clipPath id="clip-text">
    <text id="case_text" x="108px" y="233px" text-transform="uppercase" fill="url(#pattern)" font-weight="bold" font-size="260px" lengthAdjust="spacingAndGlyphs" textLength="376">some text</text>
   </clipPath>          
   <image xlink:href="http://www.pixelstalk.net/wp-content/uploads/2015/12/Spring-desktop-background-wallpaper-620x388.jpg"  width="570" height="295" clip-path="url(#clip-text)" x="0" y="0"  />                   
</svg> 

这里的示例

尝试以下JS代码：

$( "#text" ).keyup(function(){
        var inputText = $('#text').val(); 
        var myText = document.getElementById('case_text');
        myText.textContent = inputText;
});

尝试以下JS代码：

$( "#text" ).keyup(function(){
        var inputText = $('#text').val(); 
        var myText = document.getElementById('case_text');
        myText.textContent = inputText;
});