SVG元素的寬度和高度，以html設置，但顯示爲0 0在檢查員

我有一個矩形SVG這樣：SVG元素的寬度和高度，以html設置，但顯示爲0 0在檢查員

<svg class="legend-square"> 
    <defs> 
    <pattern id="pattern1" width="3" 
    height="3" patternunits="userSpaceOnUse" patterntransform="rotate(-45)"> 
     <rect width="2" height="3" transform="translate(0,0)" fill="purple"></rect> 
    </pattern> 
    </defs> 
    <rect width="12" height="12" fill="url(#pattern1)"></rect> 
</svg>

當我檢查所述第二矩形與鉻它沒有寬度和高度。沒有CSS規則適用於它。爲什麼它不受寬度和高度的影響？

來源

2016-04-29 user3162553

渲染是不正確的，如果不是你爲什麼在意？ –

他可能會在意，因爲它沒有按照需要運行...... – amflare

渲染不正確。矩形不顯示，因爲它沒有大小。 – user3162553

-1

它工作正常。

如果片斷工作的個體，但它包含在你的代碼的div尺寸出現，然後爲0x0考慮：Why is my div's height zero

它通常在float設置造成的。

<div> 
 
    <svg class="legend-square"> 
 
    <defs> 
 
     <pattern id="pattern1" width="3" height="3" patternunits="userSpaceOnUse" patterntransform="rotate(-45)"> 
 
     <rect width="2" height="3" transform="translate(0,0)" fill="purple"></rect> 
 
     </pattern> 
 
    </defs> 
 
    <rect width="12" height="12" fill="url(#pattern1)"></rect> 
 
    </svg> 
 
</div>

來源

2016-04-29 20:39:42

你真的沒有提供足夠的信息。例如，什麼是SVG的父元素？

僅僅因爲你的<rect>有一個寬度和高度，它並不意味着你的SVG。 SVG不像HTML，其元素擴展到適合他們的孩子。 SVG就像<canvas>元素。你必須確定它明確（或隱含）有一個大小。

您尚未爲您的<svg>元素指定寬度或高度屬性，因此它們都默認爲「100％」。它們100％取決於SVG的父元素的大小。因此我上面的第一個問題。

來源

2016-04-30 06:09:39

父元素是一個div，它具有12px的高度和寬度，當前顯示的是檢查時的高度和寬度。 – user3162553

然後創建一個顯示問題的示例。目前，您的代碼段可用於所有瀏覽器。所以幾乎不可能幫助你解決你的問題。 –

SVG元素的寬度和高度，以html設置，但顯示爲0 0在檢查員

回答

相關問題