jquery - 如何让 SVG 文本在其容器而不是整个页面内居中

Question

所以我正在使用 SVG 制作相框设计器。其中一项功能是您可以添加自己的文本，它会出现在框架上。我正在使用 jQuery .keyup 来执行此操作。我希望生成的文本出现在框架的中央。相反，它似乎是整个页面或其他地方的中心。

这里是它的 URL，供有兴趣或想查看完整代码的人使用:frame designer .

这是 HTML/SVG 代码。

<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">
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
    <stop offset="0%"   stop-color="#FFEBCD" stop-opacity="1"/>
    <stop offset="100%" stop-color="#b29377" stop-opacity="1"/>
    </linearGradient>
    <defs>                                  
        <pattern id="img1" patternUnits="userSpaceOnUse" width="1246" height="1000">
            <image xlink:href="Images/frame2.jpg" x="0" y="0" width="1247" height="751" />
        </pattern>
    </defs>             
    <defs>                                                              
        <pattern id="img3" patternUnits="userSpaceOnUse" width="1246" height="1000">
            <image xlink:href="Images/WALNUT.jpg" x="0" y="0" width="1300" height="1300" />
        </pattern>
    </defs>
    <defs>                              
        <pattern id="img5" patternUnits="userSpaceOnUse" width="1246" height="1000">
            <image xlink:href="Images/pattern1.jpg" x="0" y="0" width="1247" height="751" />
        </pattern>
    </defs>

    <rect class="frame" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" width="1247.2" height="751.2"/>
    <rect class="border" x="77.9" y="78.7" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="1100" height="600"/>
    <path class="picture" fill="none" stroke="#000000" stroke-miterlimit="10" d="M748.8,441.5h-258c-4.7,0-8.5-3.8-8.5-8.5V175c0-4.7,3.8-8.5,8.5-8.5
    h258c4.7,0,8.5,3.8,8.5,8.5v258C757.3,437.7,753.5,441.5,748.8,441.5z"/>
    <path class="picture" fill="none" stroke="#000000" stroke-miterlimit="10" d="M1051.3,441.5h-258c-4.7,0-8.5-3.8-8.5-8.5V175c0-4.7,3.8-8.5,8.5-8.5
    h258c4.7,0,8.5,3.8,8.5,8.5v258C1059.8,437.7,1056,441.5,1051.3,441.5z"/>
    <path class="picture" fill="none" stroke="#000000" stroke-miterlimit="10" d="M445.5,441.5h-258c-4.7,0-8.5-3.8-8.5-8.5V175c0-4.7,3.8-8.5,8.5-8.5
    h258c4.7,0,8.5,3.8,8.5,8.5v258C454,437.7,450.2,441.5,445.5,441.5z"/>
    <text class="text" transform="matrix(2.4428 0 0 1.5 235 550.5599)" font-family="'ComicSansMS'" font-size="41.6368">Your words here</text>
    <line stroke="#000000" stroke-miterlimit="10" x1="0" y1="751.2" x2="1247.2" y2="751.2"/>
    <line stroke="#000000" stroke-miterlimit="10" x1="0.1" y1="0" x2="1247.4" y2="0"/>
    <line stroke="#000000" stroke-miterlimit="10" x1="0" y1="0" x2="0" y2="751.2"/>
    <line stroke="#000000" stroke-miterlimit="10" x1="1247.4" y1="0" x2="1247.4" y2="751.2"/>
</svg>

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

和jQuery

$('#input').keyup(function() {
    $('.text').html($(this).val());
    $('.text').css("text-anchor: middle", "center");
});

Answer 1

在文本的变换矩阵中，您需要确保它的中心点是容器的中心。如果您希望它居中，则必须将容器宽度的一半作为 X 平移并将文本居中(正如您已经在做的那样)。这是一个与程序语言无关的公式，因此您几乎可以在任何脚本语言中记住和使用它。我将这些值用于 transform 属性(在您的网站上，通过 Firefox 中的 Firebug)，每当我键入时，它似乎都将文本居中:

transform="matrix(2.4428 0 0 1.5 624.6 550.5599)"

这就是它的样子:http://cl.ly/image/0V1E382A2m3p

将您的 CSS 保留在文本元素上，您可以删除 keyup 上的 jQuery，因为它负责使文本居中。那应该可以解决问题。