svg 項目實踐——添加可編輯的 svg 圖片

最近的項目中遇到一個需求，在頁面上添加一個能夠自由拖拽、縮放、編輯顏色的 svg 圖片，項目中引用了兩個現有的插件，對插件進行解讀以後略有心得，與你們分享一下。

自由拖拽縮放的節點 —— react-rnd

說到拖拽，咱們的第一反應固然是監聽鼠標事件來修改 dom 元素的位置，而縮放的話，則是在對元素邊界進行操做時從新修正元素的 position 和 width、height 屬性。這部分就不予過多的贅述，有興趣的朋友能夠參考下 react-rnd 這個插件，它引用了 react-draggable 和 react-resizeable 兩個插件來實現元素的拖拽和縮放。

此時咱們理論上已經實現了 dom 元素的拖拽和縮放，可是在添加了 svg 圖片以後咱們很快發現，因爲外層的拖拽是由 document.addEventListener 來實現的，可是咱們在 mouseDown 的時候，鼠標點擊的位置其實是 svg 內的 document。

那麼這個時候應該怎麼處理呢？最簡單的思路：把 svg 的 document 取出來，放到父級的 document 裏面。

自由的 svg —— react-svg

有了把 svg 的 document 取出來的思路，咱們很容易能找到一個插件：react-svg，它的實現思路與咱們上面提到的徹底一致，此處貼上它的核心代碼供各位查看：

此時咱們發現，咱們添加的 svg 圖片已經能夠自由的拖拽和縮放了。另外因爲 react-svg 還開放了一個屬性 beforeInjection，咱們能夠經過這個屬性來在 svg 掛載以前修改它的屬性，如 stroke、stroke-width、fill 等，所以咱們能夠更加靈活得處理咱們的 svg 圖片。

svg 的縮放 —— preserveAspectRatio、vector-effect

咱們很快又發現一個問題，svg 的縮放默認是等比的，也就是說當咱們橫向拉長圖片的時候，它並不會變大，只會橫向偏移居中。

這個時候咱們就要用到 svg 自帶的一個屬性：preserveAspectRatio，用來表示是否強制進行統一縮放，當設置爲 none 的時候，svg 圖片不會進行強制統一縮放，若是須要，會縮放指定元素的圖形內容，使元素的邊界徹底匹配視圖矩形。以下圖。其餘類型強制縮放可參考 MDN。

如今咱們的 svg 終於能夠自由縮放了，可是很快咱們又發現，把一個 svg 放大以後，它的線條寬度也跟着變寬了，那麼有沒有什麼屬性來保持線條寬度不變呢？答案是有的，vector-effect，可是這個屬性只對部分 svg 元素（ <circle>, <ellipse>, <foreignObject>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath> <tspan>, <use>）生效，而它的屬性有如下幾個：

none 該值指定不該用矢量效果，即，使用默認的渲染行爲，即首先用指定的繪畫填充形狀的幾何形狀，而後使用指定的繪畫描邊輪廓。

non-scaling-stroke 該值修改了筆觸的方式。一般，筆觸涉及在當前用戶座標系中計算形狀路徑的筆觸輪廓，並用筆觸顏料（顏色或漸變）填充輪廓。該值的最終視覺效果是筆觸寬度不依賴於元素的變換（包括非均勻縮放和剪切變換）和縮放級別。

non-scaling-size 該值指定元素及其後代使用的特殊用戶座標系。儘管從宿主座標空間進行任何轉換更改，該用戶座標系的比例也不會更改。可是，它沒有指定抑制旋轉和偏斜。一樣，它也不指定用戶座標系的原點。因爲此值抑制了用戶座標系的縮放，所以它還具備 non-scaling-stroke 的特性。

non-rotation 該值指定元素及其後代使用的特殊用戶座標系。儘管從宿主座標空間發生任何變換更改，該用戶座標系的旋轉和傾斜仍被抑制。可是，它沒有指定抑制縮放。一樣，它也沒有指定用戶座標系的原點。

fixed-position 該值指定元素及其後代使用的特殊用戶座標系。儘管從宿主座標空間進行任何轉換更改，用戶座標系的位置都是固定的。可是，它沒有指定抑制旋轉，偏斜和縮放。當同時指定了該矢量效果和 transform 屬性， transform 屬性將因該矢量效果而被消耗。

當咱們設置vector-effect="non-scaling-stroke"後，咱們的svg終於看起來正常了~

尾聲

以上就是咱們在作給頁面上添加一個能夠自由拖拽、縮放、編輯顏色的 svg 圖片時總結的一些東西，但願對各位有所幫助。另外咱們還有一個沒有解決的問題，若是path的內容是經過相似同心圓的方式來繪製圖形的時候，咱們並無什麼好的方法來保證縮放時候線條寬度的變化，若是有人有什麼好的意見或者方法，能夠聯繫我交流指導，能夠知音樓搜曹文亮或者添加本人微信caowl_1013,謝謝。