Question

出于某种原因，即使tspan标记已关闭，也会保留tspan元素的定位。

<svg>
    <text x="50" y="50">1<tspan y="55" fill="red">2</tspan>3</text>
</svg>

http://jsfiddle.net/4fzqmeud/1/

2和3这两个数字都会受到tspan定位的影响，即使只有2位于tspan内。但是，fill属性并非如此。我发现这是一种意想不到的行为。

我知道我可以在tspan附近使用y="50" 3。但这看起来非常麻烦。有没有办法自动＆＃34;重置tspan之后的位置而不添加另一个tspan？

Answer 1

tspan元素的fill属性是一个表示属性，它是一个样式属性。当您离开tspan元素时，样式设置将回退到输入tspan之前的设置。

tspan元素的x / y / dx / dy属性用于更新当前文本位置。在进入tspan之前，您不希望当前文本位置回退到其设置。如果确实那么x位置也会重置，导致tspan后面的文本与tspan元素中的文本水平重叠。

SVG规范包括一个基线移位属性，用于处理下标和上标。这是一个表示属性，因此只会影响您想要的tspan。此属性的值可以是＆＃34; sub＆＃34;，＆＃34; super＆＃34;，number，percent。例如......

<svg>
    <text x="50" y="50">1<tspan baseline-shift="sub" fill="red">2</tspan>3</text>
</svg>

基线转移属性适用于Chrome。不幸的是，IE目前不支持baseline-shift属性。 https://msdn.microsoft.com/en-us/library/gg558060(v=vs.85).aspx

为了让下标适用于所有浏览器，遗憾的是你必须使用繁琐的方法在你试图避免的3周围使用第二个tspan。

Answer 2

如何在外部文本元素中指定多个y位置。您也可以写y =“50 50 50”，然后在tspan中设置y =“55”。

$(document).scroll(function(){
        positionNav('portfolio', 'nav-portfolio');
        positionNav('about', 'nav-about');
        positionNav('contact', 'nav-contact');
    });

    function positionNav(section, sectionNavID) {
        // Get bottom position of section
        var bottom = $('#' + section).position().top + $('#' + section).outerHeight(true);
        var top = $(document).scrollTop()+230;

        if(top >= $('#' + section).position().top && top <= bottom){
            $('#' + sectionNavID).addClass('active');
        } else {
            $('#' + sectionNavID).removeClass('active');
        }
    }

Answer 3

如果您生成 SVG，您可以通过插入带有 zero-width space 和相反偏移量的 tspan 来在本地重置移位，而无需知道周围的元素：

<text>(x<tspan class="small" dy="3">1</tspan><tspan dy="-3">&#8203;</tspan>)</text>

如何重置SVG tspan定位而不添加额外的tspan

3 个答案: