使用背景图像创建透明的svg元素

Question

我正在尝试将上传容器类似实施为this tutorial。我有一个svg元素，它代表一个图标和图像作为背景。我不知道如何实现这个结果并使svg元素透明化：

＆＃13;

＆＃13;

figure {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #fff;
    display: block;
    padding: 20px;
    margin: 0 auto 0px;
    position: relative;
    top: 50px;
}
svg {
    width: 100%;
    height: 100%;
}
.upload-image-drop {
    background: url('http://via.placeholder.com/200x200');
    width: 200px;
    height: 200px;
    border-width: 1px;
    border-color: rgb(102, 102, 102);
    border-style: solid;
    border-radius: 5px;
}

＆＃13;

<div class="upload-image-drop" aria-disabled="false" style="height: 200px; border-style: none; border-radius: 0px;">
   <figure>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
         <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path>
      </svg>
   </figure>
</div>

＆＃13;

＆＃13;

＆＃13;

jsfiddle

Answer 1

在本教程中，他正在使用此属性绘制图标。 fill:#fff;所以......：

svg {
    width: 100%;
    height: 100%;
    fill:rgb(102, 102, 102);
}