Recently, I've been working on a customizable photo frame designer using SVG. One of the key features allows users to add their own text to the frame. To achieve this, I'm utilizing jQuery's .keyup function. However, the issue I'm facing is that despite wanting the generated text to appear centrally within the frame, it seems to be aligning itself with the center of the entire page or some other unexpected location.
If you're curious about the project or if you want to see the complete code, feel free to visit the following URL: frame designer.
Below is the HTML/SVG code snippet:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1247.2 751.2" enable-background="new 0 0 1247.2 751.2" xml:space="preserve">
<!-- SVG Code Goes Here -->
</svg>
Here's the associated CSS:
svg {
width:831.5px;
height:500.8px;
display:inline-block;
margin-left:auto;
margin-right: auto;
float:left;
margin-left:100px;
margin-top:20px;
}
.text {
fill:white;
font-family:'Open Sans', sans-serif, verdana;
text-align:center;
text-anchor: middle;
margin:auto;
}
And finally, the jQuery implementation:
$('#input').keyup(function() {
$('.text').html($(this).val());
$('.text').css("text-anchor: middle", "center");
});