javascript - 画布没有在 safari 上的另一个 svg 中读取 svg 视口

Question

我的问题有点复杂。

我在另一个<svg>内的<svg>内渲染画布。<anvas>正在读取最外层<svg>的视口，而完全忽略了最内层的视口。

这是一个带有完整代码的 jsfiddle： https ://jsfiddle.net/doLfz1a0/1/

这是问题的简化：

canvas = $('#fontstyle_straight_2_canvas')[0]
font = '20px arial'

ctx = canvas.getContext('2d')
w = canvas.width
ctx.font = font
ctx.textBaseline = 'top'
ctx.textAlign = 'center'
ctx.lineWidth = 2
ctx.fillStyle = 'black'

text = 'blackdown'

ctx.fillText(text, w * 0.5, 0, w)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" width="288px" height="308.8804px" viewBox="0 0 288 308.8804">
  <g>
    <g>
      <svg x="77.3999px" height="57.1001px" y="59px" width="133.6001px" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 160 160" style="display: inline;">
        <g>
          <g fill="#000000">
            <rect x="8.4517" y="89.25" fill="red" width="146.5483" height="21.1494"></rect>
            <foreignObject id="fontstyle_straight_2_fo" x="8.4517" y="89.25" fill="none" width="146.5483" height="31">
              <canvas x="8.4517" y="89.25" width="146.5483" height="31" id="fontstyle_straight_2_canvas"></canvas>
            </foreignObject>
          </g>
        </g>
      </svg>
    </g>
  </g>
</svg>

在 Chrome 和 Firefox 上，画布 API 呈现的文本适合红色矩形，而在 Safari 12.0.2 中，画布完全关闭。

标签： javascripthtmlsvgcanvasviewport