主页 / 问题 / 1383341
Accepted
Floyat
Asked:2022-07-18 17:57:25 +0000 UTC2022-07-18 17:57:25 +0000 UTC

iOS 设备中的线性渐变 (SVG) 问题

  • 772

两个简单的 SVG 示例，其中包含一个文本元素、一个用于创建弧的 textPath 和一个 textLength 属性集。

在第一种情况下，使用给定的线性渐变来更改文本的颜色。在第二种情况下，使用最简单的填充属性。

在 IOS 设备（Iphone 12、Iphone XR，可能在其他设备上）上观察到显示第一个示例的问题。Chrome 和 Safari 浏览器。我附上屏幕截图，示例1中的文本被截断，示例2中的一切都很好。

在浏览器或安卓设备的桌面上，没有观察到问题，我尝试了大约 5 种不同的设备。

问题是 - 是否有任何解决方案如何在 IOS 设备上使用渐变来修复彩色显示？如您所见，渐变中只有一种颜色。也许有一些 CSS 参数或渐变属性可以解决这个问题？

示例 1

 ​<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" color="red">
           ​<defs>
             ​<linearGradient id="fill">
               ​<stop stop-color="red"></stop>
             ​</linearGradient>
           ​</defs>
           ​<text font-size="28" font-style="normal" font-weight="normal" fill="url(#fill)" transform="rotate(-11, 200, 200)" textLength="463.5587568803267"><defs><path id="text" d="M 200 200 m -168, 0 a 168,168 0 1,0 336,0 a 168,168 0 1,0 -336,0"></path></defs><textPath href="#text" xlink:href="#text" textLength="463.5587568803267">Пример текста по кругу</textPath></text>
           ​
         ​</svg>

示例 2

​<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" fill="red">
           ​<text font-size="28" font-style="normal" font-weight="normal" transform="rotate(-11, 200, 200)" textLength="463.5587568803267"><defs><path id="text" d="M 200 200 m -168, 0 a 168,168 0 1,0 336,0 a 168,168 0 1,0 -336,0"></path></defs><textPath href="#text" xlink:href="#text" textLength="463.5587568803267">Пример текста по кругу</textPath></text>
</svg>

IOS上显示示例1的截图

在IOS上显示示例2的屏幕截图

Alexandr_TT 在 IOS 上的示例截图

html

2 个回答

  1. 如您所见，渐变中只有一种颜色

    这是主要原因。另外，缺少一个重要参数offset

    如果需要跨浏览器解决方案，需要按照规范设置linearGradient参数，指定所有渐变属性：

    <linearGradient id="fill">
               ​<stop offset ="0" stop-color="red"></stop>
                ​<stop offset="100%" stop-color="blue"></stop>
             ​</linearGradient>

    还可以注意的是，曲线上的文字一定不能用旋转变换-定位transform="rotate(-11, 200, 200)"，而是借助-startOffset

    color="red" - 需要从 SVG 标头中删除。为什么要一次将整个 svg 块涂成红色。在你看来，必须使用渐变。
    不然后面你可以找半天无法从CSS/样式文件中设置样式的原因

    <svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" >
  ​<defs>
       ​<linearGradient id="fill">
               ​<stop offset ="0" stop-color="red"></stop>
                ​<stop offset="100%" stop-color="blue"></stop>
       ​</linearGradient>
               <path id="text" stroke="black" d="M 200 200 m -168, 0 a 168,168 0 1,
                     0 336,0 a 168,168 0 1,0 -336,0"/>   
  ​</defs>
        ​<text font-size="36" font-style="normal" font-weight="normal" fill="url(#fill)"  textLength="463.5587568803267">
           <textPath href="#text" xlink:href="#text" textLength="463.5587568803267" startOffset="2.5%">
              Пример текста по кругу 
           </textPath>
        </text>
</svg>

    文本动画示例

    使用改变参数值startOfset

     <animate id="anT" attributeName="startOffset" begin="svg1.click;anT.end+0.5s"
  dur="4s" values="2.5%;100%" fill="freeze" repeatCount="1" />

    点击后动画会开始

    <svg id="svg1" width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" style="border:1px solid" >
  ​<defs>
       ​<linearGradient id="fill">
               ​<stop offset ="0" stop-color="red"></stop>
                ​<stop offset="100%" stop-color="blue"></stop>
       ​</linearGradient>
               <path id="text" stroke="black" d="M 200 200 m -168, 0 a 168,168 0 1,
                     0 336,0 a 168,168 0 1,0 -336,0"/>   
  ​</defs>
        ​<text font-size="36" font-style="normal" font-weight="normal" fill="url(#fill)"  textLength="463.5587568803267">
           <textPath href="#text" xlink:href="#text" textLength="463.5587568803267" startOffset="2.5%">
              Пример текста по кругу 
              <animate id="anT" attributeName="startOffset" begin="svg1.click;anT.end+0.5s" dur="4s" values="2.5%;100%" fill="freeze" repeatCount="1" /> 
           </textPath>
        </text>
</svg>

    • 1
  2. Best Answer

    文本长度

    理论 - textLength

    SVG 和元素元素上可用的 textLength 属性允许您指定显示文本的空间宽度。用户代理将使用 lengthAdjust 属性指定的一个或多个方法确保文本不会超出此距离。默认只调整字符间距，但也可以通过改变lengthAdjust来调整字形的大小。

    实际上，文本在不同浏览器中的缩放和定位略有不同。例如 FF、Chrome 和 Safari。通过在一个浏览器中调整文本的位置，可以在另一个浏览器中移动文本。

    所以最好放弃这个属性，用CSS属性代替。

    letter-spacing: 4px;
word-spacing: 2px;

    在所有浏览器中都一样。

    通过更改这些属性的值，以及font-size，startOfset您可以达到预期的结果。

    #txt {
font-size:36px;
font-style:normal;
font-weight:normal;
fill:url(#fill);
letter-spacing: 4px;
word-spacing: 2px;
}
    <svg id="svg1" width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" >
  ​<defs>
       ​<linearGradient id="fill">
               ​<stop offset ="0" stop-color="red"></stop>
                ​<stop offset="100%" stop-color="blue"></stop>
       ​</linearGradient>
             <path id="text" stroke="black" fill="none" d="M 200 200 m -168, 0 a 168,168 0 1,
                     0 336,0 a 168,168 0 1,0 -336,0" /> 
  ​</defs>
   ​<text id="txt">
           <textPath href="#text" xlink:href="#text"  startOffset="3%">
              Пример текста по кругу  
           </textPath>
  </text> 
</svg>

    更新

    添加到渐变

    gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"

    改变path了曲线，不知何故写得很奇怪

    d="M 200 200 m -168, 0?? 作为起点，
    绝对M 200 200和相对坐标的重复记录 - m -168, 0
    也许这就是IOS中Safari错误的原因？

    要求：

    谁拥有带 Safari、Chrome 的 iPhone，请检查下面的代码以了解极端字母的消失。

    #txt {
font-size:36px;
font-style:normal;
font-weight:normal;
fill:url(#fill);
letter-spacing: 4px;
word-spacing: 2px;
}
    <svg id="svg1" width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" style="border: 1px solid">
  ​<defs>
       ​<linearGradient id="fill" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
               ​<stop offset ="0%" stop-color="red"></stop>
                ​<stop offset="100%" stop-color="blue"></stop>
       ​</linearGradient>
              <path id="text" stroke="black" fill="none" d="M20,200  A180,180 0 1 0 380,200" />
  ​</defs>        ​<text id="txt">
           <textPath href="#text" xlink:href="#text"  startOffset="10%">
              Пример текста по кругу  
           </textPath>
        </text> 
</svg>

    • 1

相关问题