英文:
How to get SVG to stretch to table cell vertically?
问题
我有一个简单的带有SVG的表格单元格：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<body>
<table style="width: 8em;">
<tr>
<td style="border: 1px solid black;">
<svg viewBox="0 0 1 1" style="width: 1.37em;" preserveAspectRatio="none">
<polyline points="0,0 1,0.5 0,1" style="fill: blue;"></polyline>
</svg>
</td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet</td>
</tr>
</table>
</body>
</html>
<!-- end snippet -->
如您所见，行中的其他单元格可能会过长，从而导致行高度与默认值不同，从而在SVG和其上下边界之间引入间隙。
如何使SVG自动拉伸或缩小以填充其单元格的垂直空间，而不更改其水平大小？
英文:
I have a simple table with SVG in its table cell:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<body>
<table style="width: 8em;">
<tr>
<td style="border: 1px solid black;">
<svg viewBox="0 0 1 1" style="width: 1.37em;" preserveAspectRatio="none">
<polyline points="0,0 1,0.5 0,1" style="fill: blue;"></polyline>
</svg>
</td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet</td>
</tr>
</table>
</body>
</html>
<!-- end snippet -->
As you can see, other cells in the row can be too long, and hence cause the row height to change from the default, introducing gaps between the SVG and its bounding upper and lower borders.
How can I get the SVG to automatically stretch or shrink to fill its cell vertically, without changing its horizontal size?
答案1
得分: 2
一种解决方案是将其设为背景图像。您可以将SVG代码放入单独的文件中，或者您可以百分比编码它以在数据URI中使用。
<table style="width: 8em;">
<tr>
<td style="border: 1px solid black; width: 1.37em; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1 1%22 preserveAspectRatio=%22none%22%3E%3Cpolyline points=%220,0 1,0.5 0,1%22 style=%22fill: blue;%22%3E%3C/polyline%3E%3C/svg%3E');"></td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</td>
</tr>
</table>
英文:
One solution would be to make it a background image. You can either put the SVG code into a separate file, or you can percent-encode it to use in a data URI.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<table style="width: 8em;">
<tr>
<td style="border: 1px solid black; width: 1.37em; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1 1%22 preserveAspectRatio=%22none%22%3E%3Cpolyline points=%220,0 1,0.5 0,1%22 style=%22fill: blue;%22%3E%3C/polyline%3E%3C/svg%3E');"></td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</td>
</tr>
</table>
<!-- end snippet -->
答案2
得分: 1
以下是您要翻译的内容：
另一种解决方法是将position相对于td，以使svg包含在其中，因为svg现在是position为absolute，所以它可以接受height为100%，但position为absolute会使元素不占用空间，所以需要在td中添加width。
现在，要允许在同一td中的文本，一种方法是使用一些JavaScript来计算高度。我进行了一些研究，似乎使元素适应父元素的高度有三种选择，即position: absolute（之前的代码段）、display: flex和display: grid，position: absolute不允许在同一td中添加文本，display: flex和grid将删除td的display: table-cell，从而干扰表格。因此，通过一些JavaScript，看起来是这样的：
如果JavaScript不是一个选项，那么我只能考虑使用div创建一个“伪表格”，但您将不得不手动控制列的宽度：
请注意，代码段中的CSS和HTML部分已被翻译，但JavaScript部分保持不变。如果需要JavaScript的翻译，请告诉我。
英文:
Other solution is this, position relative to the td so that the svg is contained inside it, because the svg is now position absolute so that it accepts height 100%, but position abosulte makes the element don't ocupy space that why it's needed to add width to the td
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<body>
<table style="width: 8em">
<tr>
<td style="border: 1px solid black; position: relative; width: 1.37em">
<svg
viewBox="0 0 1 1"
style="width: 1.37em; height: 100%; position: absolute; top: 0"
preserveAspectRatio="none"
>
<polyline points="0,0 1,0.5 0,1" style="fill: blue"></polyline>
</svg>
</td>
<td style="border: 1px solid black">Lorem ipsum dolor ipsum dolor ipsum dolor ipsum dolor sit amet</td>
</tr>
</table>
</body>
</html>
<!-- end snippet -->
Now to allow text in the same td one approach is to use a little javascript to calculate the height. I did some research and it seems that making an element fit parent height comes down to 3 options, position absolute (previous code snippet), display flex and display grid, posititon absolute will not allow text in the same td, display flex and grid would remove the the display table-cell of the td which will mess with the table. So with some js it loos like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<style>
table td {
border: 1px solid black;
}
.svg-container {
display: flex;
}
.svg-container svg {
width: 1.37em;
align-self: stretch;
}
.svg-container svg polyline {
fill: blue;
}
.svg-container span {
align-self: center;
}
</style>
</head>
<body>
<table style="width: 8em">
<tr>
<td>
<div class="svg-container">
<svg viewBox="0 0 1 1" preserveAspectRatio="none">
<polyline points="0,0 1,0.5 0,1"></polyline>
</svg>
<span>One</span>
</div>
</td>
<td>Lorem ipsum dolor ipsum dolor ipsum dolor ipsum dolor sit amet</td>
</tr>
<tr>
<td>
<div class="svg-container">
<svg viewBox="0 0 1 1" preserveAspectRatio="none">
<polyline points="0,0 1,0.5 0,1"></polyline>
</svg>
<span>Two Here</span>
</div>
</td>
<td>Lorem ipsum</td>
</tr>
</table>
</body>
<script>
[...document.querySelectorAll(".svg-container")].forEach((container) => {
const parentHeight = container.parentNode.getBoundingClientRect().height;
container.style.height = `${parentHeight}px`;
});
</script>
</html>
<!-- end snippet -->
If javascript is not an option then I can only think of a "pseudo table" made with divs, but you will have to control the width of the columns manually:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.pseudo-table {
width: 200px;
display: flex;
flex-direction: column;
}
.pseudo-table .row,
.pseudo-table .column {
display: flex;
}
.pseudo-table .column {
border: 1px solid black;
}
.after-svg {
align-self: center;
}
.col1 {
min-width: 65px;
}
.col2,
.col3 {
min-width: 100px;
}
</style>
</head>
<body>
<div class="pseudo-table">
<div class="row">
<div class="column col1">
<svg viewBox="0 0 1 1" style="width: 1.37em" preserveAspectRatio="none">
<polyline points="0,0 1,0.5 0,1" style="fill: blue"></polyline>
</svg>
<span class="after-svg">One</span>
</div>
<div class="column col2">Lorem ipsum dolor meca vade Lorem ipsum dolor meca vade</div>
<div class="column col3">Other colum</div>
</div>
<div class="row">
<div class="column col1">
<svg viewBox="0 0 1 1" style="width: 1.37em" preserveAspectRatio="none">
<polyline points="0,0 1,0.5 0,1" style="fill: blue"></polyline>
</svg>
<span class="after-svg">Two here</span>
</div>
<div class="column col2">Lorem ipsum</div>
<div class="column col3">Other colum with more</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
答案3
得分: 1
你可以将SVG插入到背景中。在这里，我使用以下SVG文档的数据URI：
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none">
<polyline points="0,0 1,0.5 0,1" style="fill: blue;"/>
</svg>
svg {
display: block;
}
.arrow {
width: 2em;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxwb2x5bGluZSBwb2ludHM9IjAsMCAxLDAuNSAwLDEiIHN0eWxlPSJmaWxsOiBibHVlOyIvPgo8L3N2Zz4=');
background-repeat: no-repeat;
background-size: 100% 100%;
}
<table style="width: 8em;">
<tr>
<td class="arrow" style="border: 1px solid black;">
</td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet</td>
</tr>
</table>
我不知道表格有多重要，但这可以应用到任何元素，就像这里的段落一样：
svg {
display: block;
}
p {
width: 6em;
padding-left: 2em;
position: relative;
}
p:before {
position: absolute;
margin-left: -2em;
content: "";
width: 2em;
height: 100%;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxwb2x5bGluZSBwb2ludHM9IjAsMCAxLDAuNSAwLDEiIHN0eWxlPSJmaWxsOiBibHVlOyIvPgo8L3N2Zz4=');
background-repeat: no-repeat;
background-size: 100% 100%;
}
<p>Lorem ipsum dolor sit amet</p>
英文:
You can insert the SVG into the background. Here, I use a data URI of the following SVG document:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none">
<polyline points="0,0 1,0.5 0,1" style="fill: blue;"/>
</svg>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
svg {
display: block;
}
.arrow {
width: 2em;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxwb2x5bGluZSBwb2ludHM9IjAsMCAxLDAuNSAwLDEiIHN0eWxlPSJmaWxsOiBibHVlOyIvPgo8L3N2Zz4=');
background-repeat: no-repeat;
background-size: 100% 100%;
}
<!-- language: lang-html -->
<table style="width: 8em;">
<tr>
<td class="arrow" style="border: 1px solid black;">
</td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet</td>
</tr>
</table>
<!-- end snippet -->
I don't know how important the table is, but this can be applied to any element, like here, a paragraph:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
svg {
display: block;
}
p {
width: 6em;
padding-left: 2em;
position: relative;
}
p:before {
position: absolute;
margin-left: -2em;
content: "";
width: 2em;
height: 100%;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxwb2x5bGluZSBwb2ludHM9IjAsMCAxLDAuNSAwLDEiIHN0eWxlPSJmaWxsOiBibHVlOyIvPgo8L3N2Zz4=');
background-repeat: no-repeat;
background-size: 100% 100%;
}
<!-- language: lang-html -->
<p>Lorem ipsum dolor sit amet</p>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论