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在检查员

回答

相关问题