當前正在構(gòu)建基于瀏覽器的SVG應用程序。在此應用程序中，用戶可以設置各種形狀和樣式，包括矩形。當我將a stroke-width應用于rectsay 的SVG 元素時1px，筆觸rect將由不同的瀏覽器以不同的方式應用于的offset和inset。事實證明這很麻煩，尤其是當我嘗試計算矩形的外部寬度和可視位置并將其放置在其他元素旁邊時。例如：Firefox會添加1px的插圖（底部和左側(cè)）和1px的偏移量（頂部和右側(cè)）Chrome會添加1px的插圖（頂部和左側(cè)）和1px的偏移量（底部和右側(cè)）到目前為止，我唯一的解決方案是自己繪制實際邊界（可能使用path工具）并將邊界放置在描邊元素的后面。但是，此解決方案是一個不愉快的解決方法，如果可能的話，我寧愿不走這條路。所以我的問題是，您可以控制stroke-width在元素上繪制SVG的方式嗎？
3 回答
PIPIONE
TA貢獻1829條經(jīng)驗 獲得超9個贊
不可以，您不能指定筆劃是在元素內(nèi)部還是外部繪制的。我在2003年向SVG工作組提出了有關此功能的建議，但沒有得到任何支持（或討論）。
正如我在提案中指出的那樣，
您可以通過將筆觸寬度加倍，然后使用剪切路徑將對象剪切到自身，來獲得與“內(nèi)部”相同的視覺效果，并且
您可以通過將筆觸寬度加倍，然后將對象的無筆觸副本覆蓋在其自身上，來獲得與“外部”相同的視覺效果。
編輯：此答案將來可能是錯誤的。通過與（用于“內(nèi)部”）或與（用于“外部”）結(jié)合使用SVG矢量效果，應該有可能獲得這些結(jié)果。但是，Vector Effects仍然是一個工作草案模塊，尚無我能找到的實現(xiàn)。veStrokePathveIntersectveExclude
編輯2：SVG 2草案規(guī)范包括一個stroke-alignment屬性（可能的值|可能的|之外）。此屬性可能最終使其成為UA。
編輯3：有趣且令人失望的是，SVG工作組已從stroke-alignmentSVG 2中刪除。您可以在此處看到散文后描述的一些擔憂。
慕田峪4524236
TA貢獻1875條經(jīng)驗 獲得超5個贊
我找到了一種簡單的方法，它有一些限制，但對我有用：
在defs中定義形狀
定義參考形狀的剪切路徑
使用它，并在修剪外部時將其加倍
這是一個工作示例：
<svg width="240" height="240" viewBox="0 0 1024 1024">
<defs>
<path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z"/>
<clipPath id="clip">
<use xlink:href="#ld"/>
</clipPath>
</defs>
<g>
<use xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="#00D2B8" clip-path="url(#clip)"/>
</g>
</svg>
- 3 回答
- 0 關注
- 597 瀏覽
添加回答
舉報
0/150
提交
取消