Html '；显示：无'；带有模式定义的SVG元素使模式不可见_Html_Css_Svg

Html '；显示：无'；带有模式定义的SVG元素使模式不可见

html css svg

Html '；显示：无'；带有模式定义的SVG元素使模式不可见,html,css,svg,Html,Css,Svg,我有一组SVG定义，放在我的身体顶部。此svg标记的高度和宽度为0，但没有显示：无，它在文档顶部创建空间。为了解决这个问题，我添加了display:none。但是，这会导致在文档后面引用时，其中定义的模式不起作用 <body> <svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <

我有一组SVG定义，放在我的身体顶部。此svg标记的高度和宽度为0，但没有显示：无，它在文档顶部创建空间。为了解决这个问题，我添加了display:none。但是，这会导致在文档后面引用时，其中定义的模式不起作用

<body>
<svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<g id="diamond">
  <path d="M50,7 L96,100 L50,193 L4,100 L50,7 Z"></path>
</g>
<g id="oval">
  <path d="M3,150 L3,50 C3,24.084 24,3 50,3 C76,3 97,24 97,50 L97,150 C97,176 75.916,197 50,197 C24.084,197 3,176 3,150 Z"></path>
</g>
<g id="squiggle">
  <path d="M25,77 C25,48 4,45 4,25 C4,14 18,3 40,3 C66,3 92,21 92,54 C92,86 75,100 75,123 C75,152 96,155 96,175 C96,186 82,197 60,197 C34,197 8,179 8,146 C8,114 25,100.02465 25,77 Z"></path>
</g>
<pattern id="triangle" width="10" height="10" patternUnits="userSpaceOnUse">
    <polygon points="5,0 10,10 0,10"></polygon>
</pattern>
<pattern id="green-stripes" x="10" y="10" width="10" height="10" patternUnits="userSpaceOnUse" style="display:inline-block;">
  <rect x="0" y="7" width="10" height="10" style="stroke: 1px; fill: green;"></rect>
</pattern>
<pattern id="red-stripes" x="10" y="10" width="10" height="10" patternUnits="userSpaceOnUse" style="display:inline-block;">
  <rect x="0" y="7" width="10" height="10" style="stroke: 1px; fill: red;"></rect>
</pattern>
<pattern id="purple-stripes" x="10" y="10" width="10" height="10" patternUnits="userSpaceOnUse" style="display:inline-block;">
  <rect x="0" y="7" width="10" height="10" style="stroke: 1px; fill: purple;"></rect>
</pattern>
</defs>
</svg>
<div class="topbar"></div>
<div id="game">
    <div class="cardrow">
    <div class="card purple-card" id="oqFqnSBH6zMRc5hJr" width="100" height="200">
  <svg width="100" height="200" z-index="-40" style="display:inline-block">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#diamond" style="stroke: purple; fill: none;"></use>
  </svg>
  <svg width="100" height="200" z-index="-40" style="display:inline-block">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#diamond" style="stroke: purple; fill: none;"></use>
  </svg>
  </div>
 <div class="card red-card" id="xPibDdNYe2vAgDYKK" width="100" height="200">
  <svg width="100" height="200" z-index="-40" style="display:inline-block">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#diamond" style="stroke: red; fill: none;"></use>
  </svg>
  <svg width="100" height="200" z-index="-40" style="display:inline-block">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#diamond" style="stroke: red; fill: none;"></use>
  </svg>
  </div>    
    <div class="card purple-card" id="MgATXd9RTv52MKFtp" width="100" height="200">
  <svg width="100" height="200" z-index="-40" style="display:inline-block">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#diamond" style="stroke: purple; fill: url(#purple-stripes);"></use>
  </svg>
  <svg width="100" height="200" z-index="-40" style="display:inline-block">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#diamond" style="stroke: purple; fill: url(#purple-stripes);"></use>
  </svg>
  </div>
    <div class="card red-card" id="mzpSYNnFXFX9SjPLa" width="100" height="200">
  <svg width="100" height="200" z-index="-40" style="display:inline-block">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#oval" style="stroke: red; fill: none;"></use>
  </svg>
  <svg width="100" height="200" z-index="-40" style="display:inline-block">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#oval" style="stroke: red; fill: none;"></use>
  </svg>
  <svg width="100" height="200" z-index="-40" style="display:inline-block">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#oval" style="stroke: red; fill: none;"></use>
  </svg>
  </div>
  </div>
</div></body>

您可以将显示：无替换为位置：绝对，并且定义svg不占用更多空间：

    <svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute">

回答得很好。它还可用于

显示：块

而不是

位置：绝对

。