Html 输入类型文件作为iOS应用程序的可单击svg。（对主应用程序使用vue）

我正在尝试制作一个表单，它有一个“添加照片”可点击的svg，弹出一个模式，上面写着“上传照片”或“从图库中选择”。我将这两个元素包装在一个outter div中，并认为输入el会有助于实现这一点，但这并没有真正起作用

那么，如何让svg覆盖类型为file的输入元素呢？我正在为这个应用程序使用Vue，但我认为这只是一个简单的点击事件，但没有起作用

作为参考，当在我的应用程序中单击svg时，这就是我想要的视觉效果。您可以看到svg及其上的模式（添加照片）

我只是不知道如何用输入类型文件和样式复制这种类型的外观。我想第一个开始是设置svg

如果你需要更多的代码，请让我知道！ 代码笔：

HTML

您可以使用

包装SVG和

的属性
，以及
id
将输入和标签链接在一起：

范例


.add-photo-btn\u包装器{
边缘顶部：3rem；
左边距：5雷姆；
}
.add-photo-btn_输入{
显示：无
}
标签{
光标：指针；/*显示它是可编辑的*/
}

这真的很有趣！我从未考虑过使用这样的标签。这将是一个iOS应用程序，所以我没有真正担心光标，但谢谢你！我为我的点击事件制作了一个模式，在此之前，背景元素变灰，上面有两个可点击的元素（通过访问相机和画廊添加照片），你认为最好让这些元素像这样工作，而不是svg本身吗？@LovelyAndy这实际上是标签的意思；）
<div class="add-photo-btn_wrapper">
  <input type="file" @change="onPhotoSelected" class="add-photo-btn_input" />
<svg width="230" height="157" viewBox="0 0 230 157" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<rect width="225" height="152" rx="8" fill="#FFFDF9"/>
<rect x="2.5" y="2.5" width="220" height="147" rx="5.5" stroke="#2D758C" stroke-width="5"/>
</g>
<path d="M64.3408 109.648L63.7888 111.568H67.7968L67.2448 109.648C66.9888 108.816 66.7408 107.96 66.5008 107.08C66.2768 106.2 66.0528 105.328 65.8288 104.464H65.7328C65.5088 105.344 65.2848 106.224 65.0608 107.104C64.8368 107.968 64.5968 108.816 64.3408 109.648ZM59.0848 118L64.1968 102.304H67.4608L72.5728 118H69.6448L68.4208 113.752H63.1408L61.9168 118H59.0848ZM78.3956 118.288C76.9076 118.288 75.7236 117.752 74.8436 116.68C73.9796 115.592 73.5476 114.072 73.5476 112.12C73.5476 111.16 73.6836 110.296 73.9556 109.528C74.2436 108.76 74.6196 108.112 75.0836 107.584C75.5476 107.056 76.0756 106.648 76.6676 106.36C77.2756 106.072 77.8996 105.928 78.5396 105.928C79.2116 105.928 79.7796 106.048 80.2436 106.288C80.7076 106.512 81.1716 106.824 81.6356 107.224L81.5396 105.328V101.056H84.2996V118H82.0196L81.8276 116.728H81.7316C81.2996 117.16 80.7956 117.528 80.2196 117.832C79.6436 118.136 79.0356 118.288 78.3956 118.288ZM79.0676 116.008C79.9476 116.008 80.7716 115.568 81.5396 114.688V109.192C81.1236 108.824 80.7156 108.568 80.3156 108.424C79.9316 108.28 79.5396 108.208 79.1396 108.208C78.3716 108.208 77.7236 108.544 77.1956 109.216C76.6676 109.888 76.4036 110.848 76.4036 112.096C76.4036 113.376 76.6276 114.352 77.0756 115.024C77.5396 115.68 78.2036 116.008 79.0676 116.008ZM91.9425 118.288C90.4545 118.288 89.2705 117.752 88.3905 116.68C87.5265 115.592 87.0945 114.072 87.0945 112.12C87.0945 111.16 87.2305 110.296 87.5025 109.528C87.7905 108.76 88.1665 108.112 88.6305 107.584C89.0945 107.056 89.6225 106.648 90.2145 106.36C90.8225 106.072 91.4465 105.928 92.0865 105.928C92.7585 105.928 93.3265 106.048 93.7905 106.288C94.2545 106.512 94.7185 106.824 95.1825 107.224L95.0865 105.328V101.056H97.8465V118H95.5665L95.3745 116.728H95.2785C94.8465 117.16 94.3425 117.528 93.7665 117.832C93.1905 118.136 92.5825 118.288 91.9425 118.288ZM92.6145 116.008C93.4945 116.008 94.3185 115.568 95.0865 114.688V109.192C94.6705 108.824 94.2625 108.568 93.8625 108.424C93.4785 108.28 93.0865 108.208 92.6865 108.208C91.9185 108.208 91.2705 108.544 90.7425 109.216C90.2145 109.888 89.9505 110.848 89.9505 112.096C89.9505 113.376 90.1745 114.352 90.6225 115.024C91.0865 115.68 91.7505 116.008 92.6145 116.008ZM106.406 118V102.304H111.35C112.214 102.304 113.014 102.384 113.75 102.544C114.502 102.704 115.15 102.976 115.694 103.36C116.238 103.744 116.662 104.248 116.966 104.872C117.27 105.48 117.422 106.24 117.422 107.152C117.422 108.016 117.27 108.768 116.966 109.408C116.662 110.048 116.238 110.584 115.694 111.016C115.166 111.432 114.534 111.744 113.798 111.952C113.078 112.144 112.294 112.24 111.446 112.24H109.19V118H106.406ZM109.19 110.008H111.23C113.534 110.008 114.686 109.056 114.686 107.152C114.686 106.16 114.382 105.48 113.774 105.112C113.182 104.728 112.302 104.536 111.134 104.536H109.19V110.008ZM120.135 118V101.056H122.895V105.424L122.799 107.704C123.295 107.24 123.839 106.832 124.431 106.48C125.039 106.112 125.751 105.928 126.567 105.928C127.831 105.928 128.751 106.336 129.327 107.152C129.903 107.952 130.191 109.104 130.191 110.608V118H127.431V110.968C127.431 109.992 127.287 109.304 126.999 108.904C126.711 108.504 126.239 108.304 125.583 108.304C125.071 108.304 124.615 108.432 124.215 108.688C123.831 108.928 123.391 109.288 122.895 109.768V118H120.135ZM138.342 118.288C137.606 118.288 136.902 118.152 136.23 117.88C135.558 117.608 134.958 117.208 134.43 116.68C133.918 116.152 133.51 115.504 133.206 114.736C132.902 113.968 132.75 113.096 132.75 112.12C132.75 111.144 132.902 110.272 133.206 109.504C133.51 108.736 133.918 108.088 134.43 107.56C134.958 107.032 135.558 106.632 136.23 106.36C136.902 106.072 137.606 105.928 138.342 105.928C139.078 105.928 139.782 106.072 140.454 106.36C141.142 106.632 141.742 107.032 142.254 107.56C142.766 108.088 143.174 108.736 143.478 109.504C143.798 110.272 143.958 111.144 143.958 112.12C143.958 113.096 143.798 113.968 143.478 114.736C143.174 115.504 142.766 116.152 142.254 116.68C141.742 117.208 141.142 117.608 140.454 117.88C139.782 118.152 139.078 118.288 138.342 118.288ZM138.342 116.032C139.206 116.032 139.886 115.68 140.382 114.976C140.878 114.256 141.126 113.304 141.126 112.12C141.126 110.92 140.878 109.968 140.382 109.264C139.886 108.544 139.206 108.184 138.342 108.184C137.478 108.184 136.798 108.544 136.302 109.264C135.822 109.968 135.582 110.92 135.582 112.12C135.582 113.304 135.822 114.256 136.302 114.976C136.798 115.68 137.478 116.032 138.342 116.032ZM150.302 118.288C149.614 118.288 149.03 118.184 148.55 117.976C148.086 117.768 147.702 117.48 147.398 117.112C147.11 116.728 146.894 116.28 146.75 115.768C146.622 115.24 146.558 114.656 146.558 114.016V108.4H144.878V106.336L146.702 106.216L147.038 103H149.342V106.216H152.342V108.4H149.342V114.016C149.342 115.392 149.894 116.08 150.998 116.08C151.206 116.08 151.414 116.056 151.622 116.008C151.846 115.96 152.046 115.896 152.222 115.816L152.702 117.856C152.382 117.968 152.014 118.064 151.598 118.144C151.198 118.24 150.766 118.288 150.302 118.288ZM159.271 118.288C158.535 118.288 157.831 118.152 157.159 117.88C156.487 117.608 155.887 117.208 155.359 116.68C154.847 116.152 154.439 115.504 154.135 114.736C153.831 113.968 153.679 113.096 153.679 112.12C153.679 111.144 153.831 110.272 154.135 109.504C154.439 108.736 154.847 108.088 155.359 107.56C155.887 107.032 156.487 106.632 157.159 106.36C157.831 106.072 158.535 105.928 159.271 105.928C160.007 105.928 160.711 106.072 161.383 106.36C162.071 106.632 162.671 107.032 163.183 107.56C163.695 108.088 164.103 108.736 164.407 109.504C164.727 110.272 164.887 111.144 164.887 112.12C164.887 113.096 164.727 113.968 164.407 114.736C164.103 115.504 163.695 116.152 163.183 116.68C162.671 117.208 162.071 117.608 161.383 117.88C160.711 118.152 160.007 118.288 159.271 118.288ZM159.271 116.032C160.135 116.032 160.815 115.68 161.311 114.976C161.807 114.256 162.055 113.304 162.055 112.12C162.055 110.92 161.807 109.968 161.311 109.264C160.815 108.544 160.135 108.184 159.271 108.184C158.407 108.184 157.727 108.544 157.231 109.264C156.751 109.968 156.511 110.92 156.511 112.12C156.511 113.304 156.751 114.256 157.231 114.976C157.727 115.68 158.407 116.032 159.271 116.032Z" fill="#2D758C"/>
<rect width="62" height="62" transform="translate(81 32)" fill="#FFFDF9"/>
<path d="M133.312 34.1797H90.6875C85.3457 34.1797 81 38.5524 81 43.9276V78.0452C81 83.4204 85.3457 87.7931 90.6875 87.7931H113.695C114.619 87.7931 115.463 87.2643 115.87 86.4295C116.277 85.5951 116.176 84.5998 115.611 83.8649L109.276 75.6268L126.834 53.1548L138.156 66.7466V70.8562C138.156 72.2022 139.24 73.2931 140.578 73.2931C141.916 73.2931 143 72.2022 143 70.8562V43.9276C143 38.5524 138.654 34.1797 133.312 34.1797V34.1797ZM128.63 47.7235C128.161 47.1609 127.466 46.8396 126.736 46.8524C126.006 46.8639 125.32 47.2056 124.87 47.783L106.219 71.6525L99.8684 63.3944C99.4096 62.7975 98.7024 62.4486 97.9531 62.4486C97.9522 62.4486 97.9508 62.4486 97.9498 62.4486C97.1991 62.4495 96.491 62.8008 96.0336 63.3996L90.7036 70.3716C89.8881 71.4387 90.0863 72.9685 91.1463 73.7891C92.2068 74.6101 93.7271 74.4102 94.5426 73.3436L97.9588 68.8752L108.759 82.9192H90.6875C88.0168 82.9192 85.8438 80.7326 85.8438 78.0452V43.9276C85.8438 41.2403 88.0168 39.0536 90.6875 39.0536H133.312C135.983 39.0536 138.156 41.2403 138.156 43.9276V59.1596L128.63 47.7235ZM97.9531 42.9528C93.9466 42.9528 90.6875 46.2322 90.6875 50.2637C90.6875 54.2952 93.9466 57.5746 97.9531 57.5746C101.96 57.5746 105.219 54.2952 105.219 50.2637C105.219 46.2322 101.96 42.9528 97.9531 42.9528ZM97.9531 52.7007C96.6178 52.7007 95.5312 51.6074 95.5312 50.2637C95.5312 48.9201 96.6178 47.8267 97.9531 47.8267C99.2885 47.8267 100.375 48.9201 100.375 50.2637C100.375 51.6074 99.2885 52.7007 97.9531 52.7007ZM143 80.6041C143 81.9501 141.916 83.041 140.578 83.041H133.918V89.7427C133.918 91.0888 132.834 92.1797 131.496 92.1797C130.158 92.1797 129.074 91.0888 129.074 89.7427V83.041H122.414C121.076 83.041 119.992 81.9501 119.992 80.6041C119.992 79.258 121.076 78.1671 122.414 78.1671H129.074V71.4654C129.074 70.1194 130.158 69.0284 131.496 69.0284C132.834 69.0284 133.918 70.1194 133.918 71.4654V78.1671H140.578C141.916 78.1671 143 79.258 143 80.6041Z" fill="#2D758C"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="230" height="157" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dx="3" dy="3"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" result="shape"/>
</filter>
</defs>
</svg>
</div>

.add-photo-btn_wrapper {
  margin-top: 3rem;
  margin-left: 5rem;
}
  
.add-photo-btn_input {
  display: none
}