svgマスクテキストダイナミック

Question

テクスチャを含む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(){ 
     $('#case_text').html($(this).val()); 
}); 

ここでは一例https://jsfiddle.net/invingo/18nd43cu/2/

Answer 1

は、このコードを試してみてくださいJS：

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