Question

我想知道是否有办法在元素中放入一个svg元素（将宽度和高度设置为100％会导致它填满锚元素）？我有一个pen我正在尝试，但ATM是唯一可以让svg元素与锚元素重叠的方法，就是设置svg元素的高度。

svg {
   position: absolute;
   top: 0; 
   left: 0;
   right: 0;
   bottom: 0;    
   width: 100%; 
   height: 45px;
}

我希望将top, bottom, left, right all设置为零会将其捕捉到锚元素中。

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,900);

.btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  height: 45px;
  max-width: 560px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
}

.btn-1 {
  background: #df2822;
  font-weight: 100;
}
.btn-1 svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
 }
 
.btn-1 rect {
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-dasharray: 422;
}

.btn-1:hover {
  background: rgba(225, 51, 45, 0);
  font-weight: 900;
  letter-spacing: 1px;
}


body {
  background: #E1332D;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.btn {
  margin-top: 50px;
  margin-left: 50px;
}

＆＃13;

<a class="btn btn-1">
    Hover
      <svg>
        <rect x="0" y="0" fill="none" width="100%" height="100%"/>
      </svg>
    </a>

＆＃13;

Answer 1

如果您需要支持IE或不想使用object-fit，那么您还可以将HTML更改为：

<a class="btn btn-1">
    <span>Hover</span> <!--adding a span tag-->
    <svg>
        <rect x="0" y="0" fill="none" width="100%" height="100%"/>
    </svg>
</a>

那么你的CSS可以简单地是：

svg {
    position: absolute;
    height:100%;   
    width: 100%; 
}

Updated codepen

Answer 2

将svg的css设置为此

svg {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Answer 3

你回答了自己的问题。是的，设置宽度和宽度高度为100％将使其填补锚点。

但是，在你的笔上你必须把它放在它上面因为它更左边和更低。原因很简单，因为在你的svg之前你把文本放在你的svg中，从而移动它。

另外，因为它是svg而不是rect，所以有一些冗余的html。

我用这段代码在你的笔中工作：

HTML：

re.sub(r'\btoo\b','',string).split()
Out[15]: ['The', 'world', 'is', 'big']

的CSS：

<a class="btn btn-1">
    <svg>
        <rect width="100%" height="100%"/>
        <p>Hover</p>
    </svg>
</a>

*当文本不在容器中时，文本不会显示，因此是p标记。

第1次编辑：atho，tru，之前留下它但在span标签中确实这样做。

第二次编辑:(你的问题让我更多实验） svg无法对齐的原因是因为您的文本不在标签中。因此，只要您不让''free''文本，设置'display：flex'时就可以使用任何标签。（如果你想让你的文字成为一个按钮）

如果没有使用flex，那么你可以将你的文本放在svg中的span / p标签中，或者你可以先保留它，但是将它的位置保持绝对，然后将它放在右边：％/ top％或transform。

获取SVG元素以扩展以填充锚元素

3 个答案: