问题：

为什么Safari用Edge/Border呈现svg g？

阙繁

2023-03-14

<svg width="29px" height="29px" viewBox="36 168 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <g id="checkbox" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(38.000000, 169.000000)">
      <ellipse id="checkbox-circle" stroke="#F2B91A" stroke-width="3" cx="12.5" cy="13.5" rx="12.5" ry="12.5"></ellipse>
      <g id="checkbox-checked" transform="translate(4.000000, 0.000000)" fill="#FFFFFF">
          <path d="M19.945968,0.293195745 C19.727568,0.141280851 19.486068,0.0470042553 19.229448,0.014387234 C18.587688,-0.0727404255 17.969868,0.241365957 17.620428,0.80747234 L8.299788,15.9252383 L3.003168,8.72089787 C2.693628,8.29866383 2.194248,8.04711064 1.668828,8.04711064 C1.293348,8.04711064 0.929628,8.17713191 0.645288,8.41394043 C0.291648,8.70749362 0.067368,9.13017447 0.012768,9.60468511 C-0.041832,10.0787489 0.079968,10.5465574 0.355908,10.9227702 L7.084308,20.0734085 C7.361088,20.4491745 7.758408,20.688217 8.163288,20.7387064 L8.229228,20.7494298 C8.297268,20.758366 8.364888,20.7619404 8.432088,20.7619404 C8.998248,20.7619404 9.522408,20.4607915 9.834048,19.9554511 L20.429808,2.76806809 C20.937168,1.94370638 20.720448,0.833834043 19.945968,0.293195745 M10.3519546,20.7619404 L0,20.7619404 L0,8.93617021e-05 L20.7039,8.93617021e-05 L20.7039,20.7619404 L10.3519546,20.7619404 L9.25523634e-06,20.7619404 L9.25523634e-06,4.17649403e-07 L20.7040592,4.17649403e-07 L20.7040592,20.7619404 L10.3519546,20.7619404 L10.3519546,20.7619404 Z" id="Combined-Shape"></path>
      </g>
  </g>
</svg>

问题是,Safari为选中的g：

图像链接

    <g id="checkbox-checked" transform="translate(4.000000, 0.000000)" fill="#FFFFFF">
        <path d="M19.945968,0.293195745 C19.727568,0.141280851 19.486068,0.0470042553 19.229448,0.014387234 C18.587688,-0.0727404255 17.969868,0.241365957 17.620428,0.80747234 L8.299788,15.9252383 L3.003168,8.72089787 C2.693628,8.29866383 2.194248,8.04711064 1.668828,8.04711064 C1.293348,8.04711064 0.929628,8.17713191 0.645288,8.41394043 C0.291648,8.70749362 0.067368,9.13017447 0.012768,9.60468511 C-0.041832,10.0787489 0.079968,10.5465574 0.355908,10.9227702 L7.084308,20.0734085 C7.361088,20.4491745 7.758408,20.688217 8.163288,20.7387064 L8.229228,20.7494298 C8.297268,20.758366 8.364888,20.7619404 8.432088,20.7619404 C8.998248,20.7619404 9.522408,20.4607915 9.834048,19.9554511 L20.429808,2.76806809 C20.937168,1.94370638 20.720448,0.833834043 19.945968,0.293195745" id="Combined-Shape"></path>
    </g>

共有1个答案

袁成化

2023-03-14

你抱怨的台词其实是你道路的一部分。如果我们用笔划而不是填充来画，你就能明白我的意思了。

html prettyprint-override"><svg viewBox="36 168 29 29">
  <g id="checkbox" stroke="black" stroke-width="0.2" fill="none" fill-rule="evenodd" transform="translate(38.000000, 169.000000)">
     <g id="checkbox-checked" transform="translate(4.000000, 0.000000)">
        <path d="M19.945968,0.293195745 C19.727568,0.141280851 19.486068,0.0470042553 19.229448,0.014387234 C18.587688,-0.0727404255 17.969868,0.241365957 17.620428,0.80747234 L8.299788,15.9252383 L3.003168,8.72089787 C2.693628,8.29866383 2.194248,8.04711064 1.668828,8.04711064 C1.293348,8.04711064 0.929628,8.17713191 0.645288,8.41394043 C0.291648,8.70749362 0.067368,9.13017447 0.012768,9.60468511 C-0.041832,10.0787489 0.079968,10.5465574 0.355908,10.9227702 L7.084308,20.0734085 C7.361088,20.4491745 7.758408,20.688217 8.163288,20.7387064 L8.229228,20.7494298 C8.297268,20.758366 8.364888,20.7619404 8.432088,20.7619404 C8.998248,20.7619404 9.522408,20.4607915 9.834048,19.9554511 L20.429808,2.76806809 C20.937168,1.94370638 20.720448,0.833834043 19.945968,0.293195745 M10.3519546,20.7619404 L0,20.7619404 L0,8.93617021e-05 L20.7039,8.93617021e-05 L20.7039,20.7619404 L10.3519546,20.7619404 L9.25523634e-06,20.7619404 L9.25523634e-06,4.17649403e-07 L20.7040592,4.17649403e-07 L20.7040592,20.7619404 L10.3519546,20.7619404 L10.3519546,20.7619404 Z" id="Combined-Shape"></path>
    </g>
  </g>
</svg>

类似资料：

为什么此setState调用不触发呈现？

我试着读过类似的问题，但没有成功。
border-radius:50%和border-radius:100%有什么区别？

本文向大家介绍border-radius:50%和border-radius:100%有什么区别？相关面试题，主要包含被问及border-radius:50%和border-radius:100%有什么区别？时的应答技巧和注意事项，需要的朋友参考一下这个实际上可以仔细区分一下，楼上的两个图具体来说应该是 border-top-left-radius 的50%和100%的区别，假如我们直接设置b
为什么浏览器将换行符呈现为空格？

问题内容：最长的时间，我一直想了解为什么当浏览器在呈现的HTML元素之间存在换行符时，为什么在它们之间添加空白区域，例如：上面的html将输出“ HelloWorld”字符串，在“ Hello”和“ World”之间没有空格，但是在以下示例中：上面的html将输出“ Hello World”字符串，在“ Hello”和“ World”之间有一个空格。现在，我可以毫无疑问地接
“border”不呈现其容器的整个宽度[duplicate]

我正在尝试显示系统中的项目列表。项目列表允许用户每行查看大量信息。用户可以向此视图添加额外的列，从而使行更长。我想要能够滚动这两个垂直和水平的信息。当添加额外的列时，我希望能够水平滚动以查看新的信息。滚动工作如我所料。但是，这些行的每一行下面都有一个边框。奇怪的是，边框只扩展到浏览器的宽度。当我水平滚动时，边框被切断：下面是我的代码的一个基本示例来演示它的操作： null null
为什么val（）函数不能用于后来呈现的HTML？

因此，我用javascript呈现了一个add minus按钮，因为我需要数据库中的数据，如果我不用javascript呈现它，它可以工作，但它不工作。 HTML： JS（渲染）： JS（加减按钮）：（调用所有函数）我的测试使我认为问题可能是val（）函数没有改变输入HTML的值，因为如果我使用console.log来显示它，它可以工作，但它不会在web上更新
什么会导致Lambda Edge中出现“KeyError:‘Records’”？

KeyError:我使用的“记录”Lambd@Edge使用CloudFront请求原件。我可以成功通过测试。但是，在cloudwatch中，我看到了错误：根据文件记录，“记录”应出现在事件中。https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-event-structure.html

为什么Safari用Edge/Border呈现svg g？

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档