帶漸變描邊的SVG線不會顯示直線

我試圖用SVG複製<hr>。現在，用SVG畫一條直線是完美的，但第二條筆畫是用漸變繪製的，它不會再以直線顯示。帶漸變描邊的SVG線不會顯示直線

以下代碼有效，但請注意，y1和y2必須相隔1個單位。例如，如果我將y1和y2設置爲210，則該行將消失。

<defs> 
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
     <stop offset="0%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" /> 
     <stop offset="50%" style="stop-color:rgba(0,0,0,0.75);stop-opacity:1" /> 
     <stop offset="100%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" /> 
    </linearGradient> 
</defs> 
<line x1="40" y1="210" x2="460" y2="211" stroke="url(#grad1)" stroke-width="1" />

我可能只是缺少一些明顯的線性漸變功能，線條看起來不錯，但我寧願只是把它弄直。謝謝。

來源

2014-02-07 foxandsticks

你正在由最後一段抓出in this part of the SVG specification

關鍵字objectBoundingBox不應使用時適用的元件的幾何形狀不具有寬度或沒有高度，如水平或垂直線的情況下即使該線由於具有非零行程寬度而具有實際厚度時也是如此，因爲邊界框計算忽略了行程寬度。當適用元素的幾何圖形沒有寬度或高度，並且指定了objectBoundingBox時，則會忽略給定效果（例如漸變或過濾器）。

objectBoundingBox是gradientUnits的默認值，所以您需要使用gradientUnits =「userSpaceOnUse」，然後調整值以適合不同的座標系。

來源

2014-02-07 22:37:38

謝謝，這工作完美！我將gradientUnits =「userSpaceOnUse」添加到漸變元素，並將y2值更改爲匹配y1值。成功！ – foxandsticks

你是一個拯救生命的人！ –

Robert Longson給出了一個很好的解釋。但有時userSpaceOnUse是一種痛苦，因爲它將內插擴展到整個畫布上，而不僅僅是線條。

相反，您可以添加一小部分值，以確保bbox大小不爲零。

例如，

<line x1="40" y1="210" x2="460" y2="210.001" stroke="url(#grad1)" stroke-width="1" />

將繪製梯度的直線。

來源

2016-01-08 22:46:00

假設你不希望任何在精確度可言，您可在線路如下

<path d='M 40 209.5 L 460 209.5 L 460 210.5 L 40 210.5' fill='url(#grad1)' />

或交替變化，以填充路徑填充矩形如下

<rect x=40 y=209.5 width=420 height=1 fill='url(#grad1)' />

它同樣有趣的是，這個問題隻影響垂直和水平線。斜線顯示正確。

來源

2018-01-15 20:20:02

帶漸變描邊的SVG線不會顯示直線

回答

相關問題