在同一网页中重复使用SVG代码，无需重写整个代码

时间：2018-01-24 04:55:43

标签： css svg

＆＃13;
＆＃13; 
.lt-arw,
.rt-arw
{
	display: inline-block;
	padding: 12px;
	background-color: #f4f4f4;
}
.rt-ar,
.lt-ar
{
	fill: #b4b4b4;
}
.lt-arw:hover,
.rt-arw:hover
{
	background-color: #020202;
}
.a-deal 
 
{
  position: relative;
  background:white;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
}
.deal-hd 
{
  background: #fff;
  z-index: 9;
  padding-right: 10px;
}
.deal-arw 
{
  background: #fff;
  z-index: 9;
  padding-left: 30px;
}
.a-deal:after 
{
  content: '';
  width: 100%;
  border-bottom: solid 1px #d6d6d6;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
}
.lt-arw
{
	margin-right: 10px;
}
＆＃13; 
<div class="a-deal mb30 flex-acenter flex">
          <h2 class="col-md4 deal-hd col3 bg-wht">Amazon Top Deals</h2>
          <div class="deal-arw flex">
            <a href="#" class="lt-arw tr-bgclr">
              <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 284.935 284.936" xml:space="preserve">
              <g id="l-arw"><path d="M110.488,142.468L222.694,30.264c1.902-1.903,2.854-4.093,2.854-6.567c0-2.474-0.951-4.664-2.854-6.563L208.417,2.857
              C206.513,0.955,204.324,0,201.856,0c-2.475,0-4.664,0.955-6.567,2.857L62.24,135.9c-1.903,1.903-2.852,4.093-2.852,6.567
              c0,2.475,0.949,4.664,2.852,6.567l133.042,133.043c1.906,1.906,4.097,2.857,6.571,2.857c2.471,0,4.66-0.951,6.563-2.857
              l14.277-14.267c1.902-1.903,2.851-4.094,2.851-6.57c0-2.472-0.948-4.661-2.851-6.564L110.488,142.468z" class="lt-ar"/></g>
              </svg>
            </a>
            <a href="#" class="rt-arw tr-bgclr">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 284.935 284.936" xml:space="preserve"><g><g>
              <path d="M222.701,135.9L89.652,2.857C87.748,0.955,85.557,0,83.084,0c-2.474,0-4.664,0.955-6.567,2.857L62.244,17.133   c-1.906,1.903-2.855,4.089-2.855,6.567c0,2.478,0.949,4.664,2.855,6.567l112.204,112.204L62.244,254.677   c-1.906,1.903-2.855,4.093-2.855,6.564c0,2.477,0.949,4.667,2.855,6.57l14.274,14.271c1.903,1.905,4.093,2.854,6.567,2.854   c2.473,0,4.663-0.951,6.567-2.854l133.042-133.044c1.902-1.902,2.854-4.093,2.854-6.567S224.603,137.807,222.701,135.9z" data-original="#000000" class="rt-ar"/></g></g> </svg>
          </a>
          </div>
        </div>
        
        <div class="a-deal mb30 flex-acenter flex">
          <h2 class="col-md4 deal-hd col3 bg-wht">Ebay Top Deals</h2>
          <div class="deal-arw flex">
            <a href="#" class="lt-arw tr-bgclr">
              <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 284.935 284.936" xml:space="preserve">
              <g id="l-arw"><path d="M110.488,142.468L222.694,30.264c1.902-1.903,2.854-4.093,2.854-6.567c0-2.474-0.951-4.664-2.854-6.563L208.417,2.857
              C206.513,0.955,204.324,0,201.856,0c-2.475,0-4.664,0.955-6.567,2.857L62.24,135.9c-1.903,1.903-2.852,4.093-2.852,6.567
              c0,2.475,0.949,4.664,2.852,6.567l133.042,133.043c1.906,1.906,4.097,2.857,6.571,2.857c2.471,0,4.66-0.951,6.563-2.857
              l14.277-14.267c1.902-1.903,2.851-4.094,2.851-6.57c0-2.472-0.948-4.661-2.851-6.564L110.488,142.468z" class="lt-ar"/></g>
              </svg>
            </a>
            <a href="#" class="rt-arw tr-bgclr">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 284.935 284.936" xml:space="preserve"><g><g>
              <path d="M222.701,135.9L89.652,2.857C87.748,0.955,85.557,0,83.084,0c-2.474,0-4.664,0.955-6.567,2.857L62.244,17.133   c-1.906,1.903-2.855,4.089-2.855,6.567c0,2.478,0.949,4.664,2.855,6.567l112.204,112.204L62.244,254.677   c-1.906,1.903-2.855,4.093-2.855,6.564c0,2.477,0.949,4.667,2.855,6.57l14.274,14.271c1.903,1.905,4.093,2.854,6.567,2.854   c2.473,0,4.663-0.951,6.567-2.854l133.042-133.044c1.902-1.902,2.854-4.093,2.854-6.567S224.603,137.807,222.701,135.9z" data-original="#000000" class="rt-ar"/></g></g> </svg>
          </a>
＆＃13;
＆＃13;
＆＃13;

我阅读了许多关于重新使用svg代码的文章，但没有得到很多帮助。我有这些svg图像代码可供使用。

＆＃13;
＆＃13; 
.deal-arw 
{
  background: #fff;
  z-index: 9;
  padding-left: 30px;
}
＆＃13; 
<div class="deal-arw flex">
            <a href="#" class="lt-arw tr-bgclr">
              <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 284.935 284.936" xml:space="preserve">
              <g id="l-arw"><path d="M110.488,142.468L222.694,30.264c1.902-1.903,2.854-4.093,2.854-6.567c0-2.474-0.951-4.664-2.854-6.563L208.417,2.857
              C206.513,0.955,204.324,0,201.856,0c-2.475,0-4.664,0.955-6.567,2.857L62.24,135.9c-1.903,1.903-2.852,4.093-2.852,6.567
              c0,2.475,0.949,4.664,2.852,6.567l133.042,133.043c1.906,1.906,4.097,2.857,6.571,2.857c2.471,0,4.66-0.951,6.563-2.857
              l14.277-14.267c1.902-1.903,2.851-4.094,2.851-6.57c0-2.472-0.948-4.661-2.851-6.564L110.488,142.468z" class="lt-ar"/></g>
              </svg>
            </a>
            
            <a href="#" class="rt-arw tr-bgclr">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 284.935 284.936" xml:space="preserve"><g><g>
              <path d="M222.701,135.9L89.652,2.857C87.748,0.955,85.557,0,83.084,0c-2.474,0-4.664,0.955-6.567,2.857L62.244,17.133   c-1.906,1.903-2.855,4.089-2.855,6.567c0,2.478,0.949,4.664,2.855,6.567l112.204,112.204L62.244,254.677   c-1.906,1.903-2.855,4.093-2.855,6.564c0,2.477,0.949,4.667,2.855,6.57l14.274,14.271c1.903,1.905,4.093,2.854,6.567,2.854   c2.473,0,4.663-0.951,6.567-2.854l133.042-133.044c1.902-1.902,2.854-4.093,2.854-6.567S224.603,137.807,222.701,135.9z" data-original="#000000" class="rt-ar"/></g></g> </svg>
          </a>
          </div>
        
**Edit** : This is my code-snippet as of now:
＆＃13;
＆＃13;
＆＃13;

我的要求：

  1. 我必须创建＆＃34; deal-arw＆＃34; div多次。那么有没有办法不使用整个svg代码并且可能重新使用已编写的代码？

  2. 在一个div中，我只能使用＆＃34; lt-ar＆＃34;宽度较小，颜色不同。这可以通过css和html实现吗？

1 个答案:

答案 0 :(得分：1)

SVG可以转换为数据URI并用作background-image：

.lt-arw,
.rt-arw
{
    display: inline-block;
    padding: 12px;
    background-color: #f4f4f4;
    background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 284.935 284.936'><path fill='#b4b4b4' d='M110.488,142.468L222.694,30.264c1.902-1.903,2.854-4.093,2.854-6.567c0-2.474-0.951-4.664-2.854-6.563L208.417,2.857 C206.513,0.955,204.324,0,201.856,0c-2.475,0-4.664,0.955-6.567,2.857L62.24,135.9c-1.903,1.903-2.852,4.093-2.852,6.567 c0,2.475,0.949,4.664,2.852,6.567l133.042,133.043c1.906,1.906,4.097,2.857,6.571,2.857c2.471,0,4.66-0.951,6.563-2.857 l14.277-14.267c1.902-1.903,2.851-4.094,2.851-6.57c0-2.472-0.948-4.661-2.851-6.564L110.488,142.468z'/></svg>");
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
}

.rt-arw
{
    transform: rotate(180deg);
}

.lt-arw:hover,
.rt-arw:hover
{
    background-color: #020202;
}

.lt-arw
{
    margin-right: 10px;
}
<div>
    <a href="#" class="lt-arw"></a>
    <a href="#" class="rt-arw"></a>
</div>       
<div class="deal-arw flex">
    <a href="#" class="lt-arw"></a>
    <a href="#" class="rt-arw"></a>
</div>

然后，正确的指向版本只需使用transform来旋转整个元素。

相关问题
最新问题