当其父元素在 display:none 后可见时显示 svg 元素答案

【问题标题】：Show svg element when its parent becomes visible after display:none当其父元素在 display:none 后可见时显示 svg 元素
【发布时间】：2015-09-23 19:35:42
【问题描述】：

在css中：

.regions-popup{
    display:none;
}

html:

<svg width="0" height="0">
        <defs>
        <linearGradient id="textgradient10-1" x1="0%" x2="100%" y1="0%" y2="0%">
                    <stop stop-color="#880e7e" offset="0%"/>
                    <stop stop-color="#e1004b" offset="100%"/>
        </linearGradient>
    </defs>
    </svg>

    <div id="regions-popup">
      <h3>
        <svg class="svgtext">
          <text font-size="24" fill="url(#textgradient10-1)" stroke="none">Text one</text>
        </svg>
      </h3>
    </div>

稍后在代码中：

$("#regions-popup").show();

显示的 div 没有文本“Text One”。如何在需要时渲染文本，或者在开始时渲染并立即隐藏它

【问题讨论】：

display-none; ?或display: none ?
您的代码表明您的 HTML 中只有 <linearGradient> 标记。那是行不通的。它需要在<svg> 中。
不，我没有包括它们，我觉得没有必要。编辑不当

标签： jquery html css svg

【解决方案1】：

根据您提供的代码，SVG 没有定义高度（或视图框）。如果你添加它，文本就会出现。

同样，<text> 没有定位值，我不确定默认值是什么...可能是x=0 y=0，在这种情况下，text 的底部边缘将刚好离开 SVG 的顶部'box' 我使 y 值等于 24px，它似乎可以正确定位文本。

是的：Source

文本的位置由元素的 x 和 y 属性决定。 x 属性确定文本左边缘的位置（文本的开头）。 y 属性确定文本底部（而不是顶部）的位置。

我注意到 SVG 似乎有一个我无法确定其来源的默认宽度...但我认为 300px 可能是 SVG 的默认值。

$("#regions-popup").show();

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.hidden {
  width: 0;
  height: 0;
  opacity: 0;
}
#regions-popup {
  text-align: center;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg class="hidden">
  <defs>
    <linearGradient id="textgradient10-1" x1="0%" x2="100%" y1="0%" y2="0%">
      <stop stop-color="#880e7e" offset="0%" />
      <stop stop-color="#e1004b" offset="100%" />
    </linearGradient>
  </defs>
</svg>

<div id="regions-popup">
  <h3>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" height="24px">
    <text x="0" y="24" fill="url(#textgradient10-1)" font-size="24px">Text One</text>
</svg>
  </h3>
  <div>

【讨论】：