如何让 SVG 在 iOS 上运行？答案

【问题标题】：How do I get an SVG to work on iOS?如何让 SVG 在 iOS 上运行？
【发布时间】：2023-04-09 20:32:01
【问题描述】：

我是新手，我有一个 SVG 可以在 Safari 中显示，但无法在 iOS 上显示。如有任何帮助，我将不胜感激。

我使用的是 Rails 4。我已经附上了 Application.css、SVG 文件和 index.html.erb 的代码。

我已将 SVG 转换为 Base 64，希望它会有所帮助，但它没有。谢谢。

Application.css 

  #searchbox {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0cHgiIGhlaWdodD0iMTNweCIgdmlld0JveD0iMCAwIDE0IDEzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDx0aXRsZT5zZWFyY2g8L3RpdGxlPgogICAgPGRlc2NyaXB0aW9uPkNyZWF0ZWQgd2l0aCBTa2V0Y2ggKGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCk8L2Rlc2NyaXB0aW9uPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPHRleHQgaWQ9Iu+AgiIgc2tldGNoOnR5cGU9Ik1TVGV4dExheWVyIiBmb250LWZhbWlseT0iRm9udEF3ZXNvbWUiIGZvbnQtc2l6ZT0iMTQiIGZvbnQtd2VpZ2h0PSJub3JtYWwiIGZpbGw9IiM5OTk5OTkiPgogICAgICAgICAgICA8dHNwYW4geD0iMSIgeT0iMTEiPu+AgjwvdHNwYW4+CiAgICAgICAgPC90ZXh0PgogICAgPC9nPgo8L3N2Zz4K);
  background-repeat: no-repeat;
  background-position: 1% 50%;
  background-size: 14px 13px;
  padding-left: 30px;
}


search2.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <title>search_icon</title>
    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <text id="" sketch:type="MSTextLayer" font-family="FontAwesome" font-size="14" font-weight="normal" fill="#999999">
            <tspan x="1" y="11"></tspan>
        </text>
    </g>
</svg>


index.html.erb

      <%= form_tag companies_path, method: :get do %>
      <%= text_field_tag :q, params[:q], placeholder: "Search", id: "searchbox" %>
      <% end %>

【问题讨论】：

Rails 是一个后端框架，与它无关。
明白。我只是想提供一些上下文并展示我在做什么，这就是我包含 index.html.erb 代码的原因。

标签： ios css ruby-on-rails svg

【解决方案1】：

我发现我的 svg 文件有问题。如果这可能对某人有所帮助，我使用https://icomoon.io 生成我想要的 Font Awesome 图标的 svg 文件，然后使用http://b64.io 将文件转换为 Base64。背景图像现在显示在 iOS 上。没有问题。

【讨论】：