为什么 SVG 元素不能在 ios 设备上运行？

Question

我有以下<h1> 标记，其设计 (Svg) 适用于最小宽度为 800 像素的屏幕。现在，当我为最小宽度为 400 像素的设备（手机）编写媒体查询时，SVG 元素根本不会出现。

HTML

<div class="explanation">
                  <h1>
                     <div class="goo" contenteditable="true">Elected as a <i>Senior Project Lead</i> <br>at the Biggest Club<br> involved in Technology and Coding: <span id = 'newline'>Coffee</span> 'N' Code.</div>
                  </h1>
                  <!-- Filter: https://css-tricks.com/gooey-effect/ -->
                  <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
                     <defs>
                        <filter id="goo">
                           <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                           <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
                           <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
                        </filter>
                     </defs>
                  </svg>
               </div>

CSS

.goo {
  font-size: 3rem;
  line-height: 1.35;
  display: inline;
  box-decoration-break: clone;
  background: var(--color-highlight);
  padding: 0.5rem 1rem;
  filter: url('#goo');
  color: black;
}

.goo:focus {
  outline: 0;
}

如何在大屏幕上看到它：

它在我的 ios 设备上的显示方式：

虽然布局不同，这是要求的，但为什么边缘不圆？为什么 SVG 元素没有像第一张图片那样出现中断？我在这里遗漏了什么吗？

Answer 1

您可以通过使用纯粹的 html/css 来做到这一点。一个建议是您应该只将 SVG 用于图像、文本动画、gif 图像。

代码如下：

HTML 代码

<div class="explanation">
<p class="description">
<span>Elected as a Senior Project Lead</span>
</p>
<p class="description">
<span>at the Biggest Club</span>
</p>
<p class="description">
<span>involved in Technology and Coding: Coffee 'N' Code.</span>
</p>
</div>

CSS 代码

.explanation {
  padding:1rem;
  background:#000;
}

.explanation .description {
  position:relative;
  display:block;
  margin:0;
}

.explanation .description span {
  display:inline-block;
  background:#fff;
  padding: 0.5rem 1rem;
  font-size:2rem;
  line-height: 1.35;
  border-radius:5px;
  margin-bottom:5px;
}

@media only screen and (max-width: 600px) {
  .explanation .description span {
     font-size:1.2rem;
   }
}

您应该使用媒体查询在响应模式下通过以下方式对 CSS 进行任何调整：

@media only screen and (max-width: 600px) {
}

只需调整要更改样式的像素即可。或者您可以使用媒体查询。