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;
});