Question

我正在尝试将SVG元素置于父元素中。但是，我发现Chrome和Safari之间存在差异。以下代码将文本很好地集中在Chrome上的方块内，但不在Safari上：

    public static List<Quote> getCustomerQuotes(QuoteFilter filter)
    {
        using (var db = new AppDBContext())
        {
            var q = db.Quotes.Where(u => u.entryDate > 0); ;

            if (filter.type != null)
            {
                q = q.Where(u => u.quoteType == filter.type);
            }

            if (filter.only_permitable != null)
            {
                q = q.Where(u => !Values.NON_PERMITABLE_QUOTES.Contains(u.quoteType));
            }

            if (filter.quote_status != null)
                q = q.Where(u => u.quote_status == (int)filter.quote_status);

            if (filter.quotenumber != null)
            {
                q = q.Where(u => u.quote_number.Contains(filter.quotenumber));
            }

            if (filter.permitnumber != null)
                q = q.Where(u => u.permit_number.Contains(filter.permitnumber));

            if (filter.permit_status != null)
                q = q.Where(u => u.permit_status == (int)filter.permit_status);

            if (filter.quoteId != null)
                q = q.Where(u => u.Id == (int)filter.quoteId);

            if (filter.customer_id != null)
                q = q.Where(u => u.customer_id == (int)filter.customer_id);


            q = q.OrderByDescending(u => u.Id);
            FileLogger.Log("getCustomerQuotes", q.ToString());
            return q.ToList();
        }
    }

结果：

我用这个测试用例创建了一个jsFiddle：

https://jsfiddle.net/yq11jot0/

如何在正方形内垂直居中显示文字？

Answer 1

如何使用dy而不是显性基线？

<svg width="200px" height="200px">
  <g transform="translate(70,70)">
    <path d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80 z" style="fill: gray"></path>
    <g>
      <text text-anchor="middle" dy="0.25em" style="fill: white" transform="scale(2)">
        <tspan>test</tspan>
      </text>
    </g>
  </g>

</svg>

Answer 2

尝试删除所有缩放和翻译（可能在浏览器中出现问题）......这在Safari中有效吗？

＆＃13;

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0 H200 V200 H0 z" fill="gray" />
    <text x="100" y="100" text-anchor="middle" dominant-baseline="middle" fill="white" font-size="100" >test</text>
</svg>

＆＃13;

请注意以下事项：

未使用px单位
使用x和y属性将文字定位到广场的中心。

Answer 3

显然，Safari希望内部tspan的主要基线设置为middle。所以这也适用于Safari：

＆＃13;

<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(50,50)">
    <path class="node" d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80" style="fill: rgb(247, 61, 0);"></path>
    <g>
      <text text-anchor="middle" fill="white"><tspan dominant-baseline="middle">test</tspan></text>
    </g>
  </g>
</svg>

＆＃13;

将SVG元素置于Chrome和Safari之间

3 个答案: