我有svg背景的标签，它延伸到文本的宽度。有没有办法编辑我的svg或CSS来修复侧面的曲率而不将svg拆分为单独的元素或使用伪后/在css之前？这样，当整个svg拉伸中间部分时，两侧将保持完整，只拉伸中间的矩形元素。
这将修复“其他重要规范”标签的拉伸边。
$(document).ready(function(){
$('.nav-tabs li').click(function() {
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
});
});.product-info .row,
.recipe-info .row {
text-align: left;
margin-left: 5px;
}
.product-info .nav-tabs,
.recipe-info .nav-tabs {
border-bottom: 1px solid #def0f8;
}
.product-info .nav-tabs > li,
.recipe-info .nav-tabs > li {
background-color: transparent;
margin-bottom: 0;
overflow: visible;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.product-info .nav-tabs > li > a:hover,
.recipe-info .nav-tabs > li > a:hover {
color: white;
text-decoration: none;
border: 0;
background-color: transparent;
}
.product-info .nav-tabs > li > a,
.recipe-info .nav-tabs > li > a {
border: none;
height: 35px;
background-color: transparent;
padding: 0;
text-align: center;
margin-top: 1px;
z-index: 2;
}
.product-info .nav-tabs > li > a .tabbed,
.recipe-info .nav-tabs > li > a .tabbed {
margin: 0;
height: 35px;
width: auto;
}
.product-info .nav-tabs > li > a .tabbed span,
.recipe-info .nav-tabs > li > a .tabbed span {
font-family: Roboto;
font-weight: 500;
font-size: 16px;
color: #616161;
line-height: 35px;
letter-spacing: 0.01em;
background-color: transparent;
padding: 0;
display: inline;
white-space: nowrap;
min-width: 95px;
}
.product-info .nav-tabs > li.active > a,
.recipe-info .nav-tabs > li.active > a {
color: #ffffff;
z-index: 10;
}
.product-info .nav-tabs > li.active > a .tabbed,
.recipe-info .nav-tabs > li.active > a .tabbed {
background-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 134.5 35' preserveAspectRatio='none' data-name='Layer 1' id='Layer_1'%3E%3Cmetadata id='metadata15'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3Etab%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs3'%3E%3Cstyle id='style5'%3E.cls-1%7Bfill:%2325437f;%7D%3C/style%3E%3C/defs%3E%3Ctitle id='title7'%3Etab%3C/title%3E%3Cpath style='fill:%2325437f;fill-opacity:1' id='path9' transform='translate%280 0%29' d='M0,35H30V0C6.39,0,11.8,35,0,35Z' class='cls-1' /%3E%3Cpath style='fill:%2325437f;fill-opacity:1' id='path11' transform='translate%280 0%29' d='M134.5,35h-30V0C128.11,0,122.7,35,134.5,35Z' class='cls-1' /%3E%3Crect y='-5.5511151e-17' x='29.5' height='35' width='56.5%25' id='rect4143' style='opacity:1;fill:%2325437f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.5;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' /%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 100% 35px;
background-position: center;
}
.product-info .nav-tabs > li.active > a .tabbed span,
.recipe-info .nav-tabs > li.active > a .tabbed span {
color: #ffffff;
width: 100%;
margin: 0 35px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-info tabbable">
<div class="row">
<ul class="nav nav-tabs">
<li class="active">
<a href="#" data-toggle="tab">
<div class="tabbed">
<span class="">Details</span>
</div>
</a>
</li>
<li>
<a href="#" data-toggle="tab">
<div class="tabbed">
<span class="">Other important specification</span>
</div>
</a>
</li>
</ul>
</div>
<div class="row">
<div class="tab-content">
lorem ipsum
</div>
</div>
</div>
可能嵌套的svg可以解决这个问题，这里有一个关于我如何想象实现正确扩展的svg的概念：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100%" height="35">
<defs>
<style>
</style>
</defs>
<title>expandable tab</title>
<!--
Whole tab as one path, if possible try to adjust the beizer curves so they
would keep the sides unstreched when image is streched on x axis.
-->
<!--
<path fill="#25437f" d="
m30 0
c-23.5,0 -18,35 -30,35
h30 40 30
c-12,0 -6.5,-35 -30,-35
z"
/>
-->
<!--
The sides should have fixed widths of 30, the middle uses up the available space in between.
-->
<g fill="#25437f">
<svg x="0" width="30" class="container-left">
<path d="m0 35h30v-35c-23.61 0-18.2 35-30 35z" class="path-left" vector-effect="non-scaling-stroke"/>
</svg>
<svg x="29" width="90%" style="overflow: hide;">
<!--
Should have width of 100% shrunken with 30 on the x axis.
Maybe apply a mask?
-->
<rect height="35" width="100%" y="-5.5511e-17"/>
</svg>
<svg x="100%" width="30" class="container-right" transform='translate(-30 0)'>
<!--
Its positioning should be counted from the right to left x="0" starting from right if direction could be set.
Hacking with x="100%" and transform="translate(-30 0)" should be doing the same, but they are not.
-->
<path d="m0 35h-30v-35c23.61 0 18.2 35 30 35z" class="path-right" vector-effect="non-scaling-stroke"/>
</svg>
</g>
</svg>
我正在寻找一种使用纯html / svg / css技术来调整标签大小的实现（没有javascript调整）。我的目标是用一个html元素替换左，中，右块的html hackery，从而减少混乱选项卡的机会，并在浏览器中呈现相同的方式（来自IE11＆gt;）。
坚持使用背景图像的代码结构，当然没有必要使用相关的css规则，甚至可以使用带有<text/>标签的纯svg解决方案来实现扩展选项卡，因为文本随着非拉伸而增长旁路。
相关有趣的链接：
答案 0 :(得分：1)
好的我尝试为你改变它，并使用纯CSS和3个类（左，中，右） - 每个都有不同的SVG base64数据。仍感觉有点hacky，但如果这更接近你正在寻找的东西，请告诉我。
$(document).ready(function(){
$('.nav-tabs li').click(function() {
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
});
});ul {
display:block;
width: 100%;
}
li {
list-style:none;
}
.tabbed {
display:inline-block;
}
.nav-tabs {
display: inline-flex;
width: 100%;
}
.tab-content {
margin-top:50px;
margin-left:70px;
}
.tabText {
position:relative;
color:white;
display:inline-block;
z-index:10;
padding:10px;
height:35px;
vertical-align:top;
}
.left {
display:inline-block;
margin:0;
padding:0;
height: 35px;
width: 35px;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns:cc='http://creativecommons.org/ns' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 30 35' enable-background='new 0 0 30 35' xml:space='preserve'%3E%3Cpath id='left' fill='%2325437F' d='M0,35h30V0C6.4,0,11.8,35,0,35z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-size:cover;
}
.middle {
display:inline-block;
margin:0;
padding:0;
background-color: #25437F;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns:cc='http://creativecommons.org/ns' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 56.5 35' enable-background='new 0 0 56.5 35' xml:space='preserve'%3E%3Crect id='middle' fill='%2325437F' width='56.5' height='35'/%3E%3C/svg%3E%0A");
background-repeat:no-repeat;
background-size:cover;
width:auto;
height:35px;
margin-left:-6px;
}
.right {
display:inline-block;
margin:0;
padding:0;
height: 35px;
width: 35px;
margin-left:-6px;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns:cc='http://creativecommons.org/ns' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 30 35' enable-background='new 0 0 30 35' xml:space='preserve'%3E%3Cpath id='right' fill='%2325437F' d='M30,35H0V0C23.6,0,18.2,35,30,35z'/%3E%3C/svg%3E%0A");
background-repeat:no-repeat;
background-size:cover;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-info tabbable">
<div class="row">
<ul class="nav nav-tabs">
<li class="active">
<a href="#" data-toggle="tab">
<div class="tabbed">
<div class="left">
<div class="tabText"></div>
</div>
<div class="middle">
<div class="tabText">Details</div>
</div>
<div class="right">
<div class="tabText"></div>
</div>
</div>
</a>
</li>
<li>
<a href="#" data-toggle="tab">
<div class="tabbed">
<div class="left">
<div class="tabText"></div>
</div>
<div class="middle"><div class="tabText">Other important specification</div></div>
<div class="right">
<div class="tabText"></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="row">
<div class="tab-content">
lorem ipsum
</div>
</div>
</div>