Canvas не читает svg viewport внутри другого svg на сафари - PullRequest
Новая
       38

Canvas не читает svg viewport внутри другого svg на сафари

0 голосов
/ 01 января 2019

Моя проблема немного сложнее.

Я рендерил холст внутри , который внутри другого . читает в области просмотра самого внешнего , полностью игнорируя внутренний.

Вот 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-интерфейсом canvas, помещается в красный прямоугольник, а в Safari 12.0.2 холст полностью отключен.

...