使svg模式內容從<pattern>的框架溢位，而不是被截斷

我創建了一個帶有圖示的圖案。用戶可以拖動滑塊來旋轉圖案的圖示。這是我的代碼：

const slider = document.getElementById("slider")

const carrotIcon = document.getElementById("carrotIcon")

slider.oninput = function(){ 

  carrotIcon.setAttribute('transform', 'rotate(' slider.value ' 25 25) translate(0 0)')
}

<svg width="200px" height="150px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  
  <symbol id="carrot" viewBox="0 0 50 50">
        <rect width="50" height="50" fill="none" stroke="black" stroke-width="1"/>
    <path d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8z" />

  </symbol>
  
  <pattern id="myPat" patternUnits="userSpaceOnUse" width="50" height="50" patternTransform="rotate(0)">
    <use id="carrotIcon" xlink:href="#carrot" width="50" height="50" fill="orange" transform="rotate(0 25 25) translate(0 0)"></use>
  </pattern>
  
  <rect x="0px" y="0px" width="300px" height="200px" fill="url(#myPat)"> </rect>
</svg>


<p style=font-size:15px>Rotate Icons </p>
<input id="slider" type="range" min="0" max="360" value="0" step='1' >

可以注意到，當你旋轉時，pattern 的內容會被 的邊框截斷<pattern>，因為在某些維度上，pattern 的內容比 pattern 的邊框大。

我希望圖案的內容可以在旋轉時從圖案中溢位。它們可以相互重疊。這是預期結果的圖表：

你知道如何實作嗎？

uj5u.com熱心網友回復：

理論上，這應該通過overflow="visible"在<pattern>元素中添加 a 來解決。不幸的是，您遇到了瀏覽器實作沖突的未解決問題。

SVG 2 規范是這樣說的：

SVG 的用戶代理樣式表將pattern元素的溢位屬性設定為hidden，這會導致在圖案拼貼的邊界處創建一個矩形剪切路徑。除非溢位屬性被覆寫，否則圖案內超出圖案矩形的任何圖形都將被剪裁......

請注意，如果溢位屬性設定為可見，則當前未定義模式邊界之外的模式的呈現行為。SVG 的未來版本可能需要顯示溢位。鼓勵 SVG 實作者渲染溢位，因為這是作者所期望的行為......

2016 年的一個未解決問題解釋了這一點：

SVG 1 中沒有明確定義圖案瓷磚的可見溢位效果，導致無法互操作的實作......

這不是理論上的問題。我收到了作者的抱怨和困惑，他們抱怨為什么在一個瀏覽器中按他們想要的方式作業的模式在另一個瀏覽器中卻不起作用。具體來說，當圖案的重復元素不適合整齊的矩形瓷磚時，就會出現問題。

這是最近的示例螢屏截圖。上圖來自 Firefox，盡管存在溢位值，但仍顯示剪裁到圖案拼貼，下圖來自 Chrome...

我目前對作者的最佳建議是使用<use>元素來創建足夠的重復以完全填充矩形瓷磚。但這遠非理想。它不僅是雜亂和重復的代碼，它還開辟了渲染中邊緣效應的可能性（顯示圖案瓷磚的邊緣）。

從那以后，什么都沒有發生：

boggydigital 于 2018 年 6 月 11 日將此添加到 SVG 2.1 作業草案里程碑

所以你被困<use>在你的<pattern>. 每個人都需要圍繞自己的旋轉中心旋轉。最好的解決方案是旋轉<symbol>- 然后需要它自己的內容overflow="visible"才能作業。

const slider = document.getElementById("slider")

const carrotIcon = document.getElementById("carrotIcon")

slider.oninput = function(){ 

  carrotIcon.setAttribute('transform', 'rotate(' slider.value ' 25 25) translate(0 0)')
}

<svg width="200px" height="150px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  
  <symbol id="carrot" viewBox="0 0 50 50" overflow="visible">
     <g id="carrotIcon">
        <rect width="50" height="50" fill="none" stroke="black" stroke-width="1"/>
        <path d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8z" />
     </g>
  </symbol>
  
  <pattern id="myPat" patternUnits="userSpaceOnUse" width="50" height="50" style="overflow:visible">
    <use xlink:href="#carrot" width="50" height="50" fill="orange"></use>
    <use xlink:href="#carrot" x="-50" width="50" height="50" fill="orange"></use>
    <use xlink:href="#carrot" x="50" width="50" height="50" fill="orange"></use>
    <use xlink:href="#carrot" y="-50" width="50" height="50" fill="orange"></use>
    <use xlink:href="#carrot" y="50" width="50" height="50" fill="orange"></use>
  </pattern>
  
  <rect x="0px" y="0px" width="300px" height="200px" fill="url(#myPat)" overflow="visible"> </rect>
</svg>


<p style=font-size:15px>Rotate Icons </p>
<input id="slider" type="range" min="0" max="360" value="0" step='1' >

標籤：csssvg

上一篇：InkscapeSVG在Firefox中渲染不正確

下一篇：如何用svg線條替換html紅色和綠色垂直和水平線？