SVG：非缩放标记在Safari中不起作用(在Chrome上正常工作)

kb5ga3dv 于 2023-05-04 发布在 Go

关注(0)|答案(1)|浏览(183)

我创建了一个SVG，它的作用类似于页面上的<hr>。它应该能够与其容器的宽度成比例地缩放（例如页面宽度），包括开始和结束<marker>元素。这在Chrome中可以正常工作，但在Safari中，标记会改变大小。我的SVG语法有什么问题吗？
这是我的svg代码和一个codepen的链接。

<svg viewBox='0 0 300 4' xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker 
      id='diamond'
      viewBox='0 0 10 10'
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6">
      <polygon points="0,5 5,0 10,5 5,10" fill="#9A8654" /> 
    </marker>
  </defs>
  <line x1='1' y1='2' x2='299' y2='2' stroke='#9A8654' stroke-width='1' vector-effect="non-scaling-stroke" stroke-dasharray='2 2' marker-start='url(#diamond)' marker-end='url(#diamond)'/>
</svg>

当在actual site上使用时，标记在Safari中甚至更破碎和水平拉伸，但我希望修复基本问题将解决其他问题。
我也试过preserveAspectRatio="none"没有任何运气。

google-chrome

来源：https://stackoverflow.com/questions/76124939/svg-non-scaling-markers-not-working-in-safari-works-correctly-on-chrome

1条答案

按热度按时间

tnkciper1#

我能够使用一些值的百分比来解决这个问题。我不得不为开始和结束做不同的标记，因为没有办法正确地定位它们，否则。

<svg height='10' width='100%' viewBox='0 0 100% 10'  xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
            id='start'
            viewBox='0 0 2 2'
            refX='0'
            refY='1'
            markerHeight='4'
            markerWidth='4'
            >
      <polygon points='0,1 1,0 2,1 1,2' fill="#9A8654"/>
    </marker>
    <marker
            id='end'
            viewBox='0 0 2 2'
            refX='2'
            refY='1'
            markerHeight='4'
            markerWidth='4'
            >
      <polygon points='0,1 1,0 2,1 1,2' fill="#9A8654"/>
    </marker>
  </defs>
  <line 
        x1='0%'
        x2='100%' 
        y1='5' 
        y2='5' 
        stroke-width='2' 
        stroke="#9A8654"
        stroke-dasharray='2 2'
        marker-start='url(#start)'
        marker-end='url(#end)'
        vector-effect='non-scaling-stroke'/>
</svg>

赞(0）回复(0）举报 2023-05-04

我来回答

SVG：非缩放标记在Safari中不起作用(在Chrome上正常工作)

1条答案

相关问题

热门标签

最新问答