Question

在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”。如何在需要时进行文本渲染，或者可以在开始时渲染文本并立即隐藏

Answer 1

根据您提供的代码，SVG没有定义高度（或视图框）。如果添加，则会显示文本。

同样地，<text>没有定位值，我不确定默认值是什么......可能是x=0 y=0，在这种情况下text的下边缘只是在SVG'框的顶部'我使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>

显示svg元素时，其父元素在display：none后变为可见

1 个答案: