There is such a xml markup structure:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="93mm" height="53mm"> <rect x="0" y="0" width="93mm" height="53mm" stroke="black" stroke-width="2px" fill="white" /> <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" /> <text x="20" y="55" font-family="Verdana" font-size="43pt" id="hello">Hello World!</text> <text x="100" y="100" font-family="" font-size="">Кукарамба</text> </svg>

And there is an HTML form! Suppose I entered the word "Хэшкод" in the input type="text" "Хэшкод" , how can I create such a tag - <text x="100" y="100" font-family="Verdana" font-size="20px">Хэшкод</text> and add before closing tag </svg> ? I plan to implement this task using jQuery.

  • The value of the x, y, font-family and font-size attributes is also going to be received from the form fields .. But I can’t figure out how to implement it yet. With Canvas, everything was much simpler, but we need vector graphics, not raster, so we had to abandon Canvas! - spoilt
  • Surely no one can answer this question ... sorry! - spoilt

2 answers 2

You can do this again:

 var elem = $('<text/>') .attr("x", 100) .attr("y",100) .attr("font-family","Verdana") .attr("font-size","20px") .text($("#you_input_id").val()); $('svg').append(elem);

Read the @Spectre comment and its link found this:

Unsupported in IE:

$ ('<input />', {type: 'text', name: 'test'}). appendTo ("body");

Supported workaround:

$ ('<input type = "text" />'). attr ({name: 'test'}). appendTo ("body");

So MY beautiful version will be (although the top quote does not apply to this case, as @Spectre said , and I agree with him):

 var elem = $('<text/>'); elem.attr( { "x":100, "y":100, "font-family":"Verdana", "font-size":"20px" }).text($("#you_input_id").val()); $('svg').append(elem);

And you can arrange in the form of a plugin , as @Spectre likes, and use an entry like:

 $("input").each(function(){ $('svg').append($(this).toSvgTags());});
  • 2
    ugly: var elem = $ ('<text />', {x: 100, y: 100, font-family: 'Verdana', font-size: '20px'}) ... jQuery (html, props) - Specter
  • one
    Thank you, I did not know that it was possible - Chad
  • one
    > how @Spectre likes Specter would use the backbone everywhere, even where it is not needed, so it's dangerous to listen to it =)> Unsupported in IE: ... the statement is true only for inputs> Internet Explorer button element and change its type; ... - Specter
  • one
    Yes, I agree, but for me, it would be logically true to indicate that the names we list are attributes of the tag. - Chad
  • 2
    the difference is insignificant, the main thing is that the attributes are specified in the form of a hash, especially when there are more than one - Specter

I would implement using templates :

 var tmpl = '<text x="100" y="100" font-family="Verdana" font-size="20px"><%= text %></text>'; var result = _.template(tmpl, { text : $('input').val() }); $('svg').append(result);

In the same way, it was possible to dynamically assign other arguments x, y, font-family, etc...