Question

我将以下图形嵌入到标记中：

<div id="svgContainer" >
  <svg  xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        preserveAspectRatio="xMaxYMin meet"
        viewBox="0 0 1800 1111">
    <defs>
      <linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
        <stop stop-color="black" offset="0"/>
        <stop stop-color="white" offset="1"/>
      </linearGradient>

      <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
        <rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
        <circle cx=".5" cy=".5" r=".5" fill="white" />
      </mask>
    </defs>
    <foreignObject width="100%" height="100%" 
    id="coverImageContainer" mask="url(#masking)">
      <img id="coverImage" src="/images/v3/eminem-cover.jpg" />
    </foreignObject>
  </svg>
</div>

在Safari和Chrome上，使用图形中心作为适当的锚点，图形会适当调整大小。但是，在Firefox上，图像会调整大小，因为我已将preserveAspectRatio元素上的svg设置为xMinYMax meet。是什么导致了这种行为的差异？

Firefox不遵守preserveAspectRatio

0 个答案: