上了!上了!SVG編輯器上線了!

2021-12-09 135編輯器

Svg編輯器界面主要分為 4 個部分:左側效果選擇區、上方工具欄、右側效果設置區以及中間的效果編輯區。

左側效果選擇區域主要是編輯器效果的展示,你可以在素材、組合或是樣式裡選擇你喜歡的svg效果進行編輯。

上方工具欄則是一些簡單的編輯操作,共有10個功能。包括上移/下移、間距、刪除、新建、保存、同步、導出、預覽、個人中心。

作品效果的修改都在右側區域完成,該區域主要分為 2 個部分,一是編輯,二是教程。

中間的效果編輯區是對整個作品的展示,不僅可以及時看到作品的展示效果,還可以對不同區塊進行上移/下移、間距、刪除等操作,使作品的整體搭配更加協調、美觀。

相比單個的svg樣式,素材的靈活度更高、可搭配性強,多種素材可自由組合。

目前的素材分類有無縫圖、點擊、滑動、長按、圖片輪播、超連結、小程序、音頻、視頻、點A見B、百葉窗、淘口令等,每一個大分類下又有多種不同效果選擇,比如視頻這個分類之下又有無縫拼接視頻和橫屏無縫拼接視頻兩種效果。

除了素材效果以外,svg編輯器還為大家準備好了 4 種圖文展開的效果,分別是點擊直接展開-自定義觸發、點擊換圖展開-自定義觸發、自動換圖展開-自定義觸發、點擊縮回再展開-自定義觸發,如果自己在效果組合上還不太拿手,可以嘗試使用組合素材。

素材和組合的每一種效果都附有使用教程,滑鼠懸浮於效果右上方的問號按鈕處,會彈出該樣式的id、教程及展示效果案例,掃碼可查看案例效果。

 

間距功能屬於一個新的編輯功能。使用方法:在編輯區域選中某個樣式區塊,點擊上方菜單欄的間距,可調整選中該區塊內外邊距的距離。

內邊距為該素材在紅色框線內的位置,外邊距為該區塊和上下區塊之間以及兩側邊距的距離。

 

編輯好的文章可以通過兩種方式複製到微信公眾號後臺,一是同步到微信公眾號,二是複製代碼。

同步:點擊上方菜單欄同步,在彈出菜單欄中根據提示填寫相關內容即可。授權公眾號的方法和135編輯器授權同步一致(點我查看如何授權公眾號)

導出:製作完成的svg作品代碼可以複製,複製的代碼可以直接粘貼到135編輯器使用(點擊html進入代碼模式,粘貼代碼即可),也可以在微信後臺保存使用(點我查看如何複製代碼到微信公眾號後臺)

三兒必須要吹爆這個功能,以往在135編輯器需要通過動畫功能或代碼才能完成對svg樣式的修改,但在svg編輯器,只需要在右側的效果設置區根據提示修改效果即可。

以超連結-無角標素材為例,右側需要修改的地方分別為添加封面圖、添加跳轉網頁連結,根據提示上傳圖片及連結即可,操作可以說是非常簡單了。

如圖,該功能可以實現直接從左側上傳裡拖動圖片到右側效果設置區替換圖片,無需重複上傳,一步到位。

以往我們使用135編輯器時,習慣於查找svg樣式,但相對135編輯器的svg樣式來說,svg編輯器內的素材和組合效果是一種升級和增強,很多樣式實現不了的效果在素材和組合裡會現。

通常來說,135編輯器內的svg樣式是有一定限制的。以輪播圖片樣式為例,該樣式在135內限制了圖片的數量,即使是通過代碼也無法增加,而在svg編輯器的素材效果裡,圖片數量可以在右側的效果設置區域直接增加,無需代碼操作。

因此,svg編輯器素材和組合效果靈活度更高,可自定義性強。

相關焦點

  • 你還在花錢定製svg??
    這是新上的svg樣式,超級簡單就能實現這樣炫酷的操作哦!話題猜謎,互動型推文都可以用到這個樣式哦!接下來就跟著三兒一起來學習下吧!單圖三個觸發點彈出圖片ID:101417【樣式作用】:創意SVG,可以與讀者進行有效的互動,幫助打造文章氛圍。除此之外,還可以結合產品特性,製作出更多的玩法。
  • 如何使用 CSS 和 SVG 剪切和遮罩技術
    舉個例子,如果一個三角形的剪切遮罩覆蓋上樹林圖像上的話, 你可以看到三角形裡面的森林圖像。圖形的邊界被稱做剪切路徑, 不要和已經廢棄掉的 clip 屬性混淆,你可以使用clip-path 去創建一個剪切路徑。深入理解剪切剪切總是矢量路徑,這可能會比較混淆, 但是路徑的外面的任何部分都會被隱藏, 而路徑的裡面都會顯示。
  • 【SVG系列教程】繪製SVG矩形
    <svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" height="100" width="100"        style="stroke:#006600; fill: #00cc00"/></svg>
  • ilda Icons超過700個免費圖標下載,採簡單線條設計SVG向量圖格式
    之前曾專文介紹「Tilda Publishing免費網頁製作平臺,超過170種內容類型輕鬆打造獨特網站」建站服務,或許你還有印象,其實類似網站建置平臺很多,但彼此都有一些功能上的差異,因此多方嘗試、找出符合需求的選項就很重要。
  • 最強大的線上視頻編輯器--YouTube視頻編輯器
    沒錯,我就是帥氣的湯九兩君諸君許久不見別來無恙上周五遺憾斷更並非九兩君懶散所致...效果拔群同時呢也發現了大家對於視頻處理方面的急迫需求那麼今天就來簡單聊聊在做YouTube時的驚喜發現目前最強大的線上視頻編輯器
  • 繪製SVG的簡單圖形
  • SVG 閃爍動畫(Blink)
    像上世紀 80 年代的霓虹燈廣告牌,我很難不被它所吸引。chapter8-1原理閃爍動畫效果的核心在於控制元素顏色的變化,掌握好時間的控制,讓顏色的變化有引人注目的顯示,這樣在靜態的頁面中,自然會吸引住用戶的眼球。
  • SVG 圖案動畫(Pattern)
    +xml;%3csvg.../svg%3E");}以上面例子為基礎,編寫一個 SVG as background-image 版本:💡 可以在 CodePen 上進行嘗試 👇 https://codepen.io/xiaoluoboding/pen/dyGGvWK
  • SVG實現環形進度條的原理
    之前在項目中遇到一個環形進度條的需求,要求能實時更新進度,腦海中瞬間便蹦出css,svg,canvas3中方案,對於3種方案個人更偏向於
  • Linux 上 10 個最好的 Markdown 編輯器
    你可以在 Linux 平臺上找到非常多的 的 Markdown 編輯器,但是在這裡我們將儘可能地為您推薦那些最好的。希望你先對 Markdown 有一個稍微的了解,接下來讓我們逐一列出這些編輯器。1. AtomAtom 是一個現代的、跨平臺、開源且強大的文本編輯器,它可以運行在 Linux、Windows 和 MAC OS X 等作業系統上。用戶可以在它的基礎上進行定製,刪減修改任何配置文件。
  • Linux 上最好的十六進位編輯器 | Linux 中國
    十六進位編輯器可以讓你以十六進位的形式查看/編輯文件的二進位數據,因此其被命名為「十六進位」編輯器。
  • 迷你世界全新版本更新,動作編輯器正式上線,玩家:一起跳舞吧!
    前言:迷你世界可以說是一款最具有創造力的3D沙盒遊戲,最近迷你世界更新的非常頻繁,每一次更新都會帶來非常好玩的模式或者皮膚裝扮,而距離上次更新還不到半個月的時間,又來了一波更新,終於全新版本的迷你世界終於上線了。動作編輯器功能有多強大?
  • SVG之旅:填充特性
    首先我們要知道,在SVG中要讓繪製的圖形顯示出來,就必須使用以下指定填充和描邊特性:SVG填充特性在SVG2的規範中涉及到有關於填充特性主要有上表所列的幾個特性,但是在CSS 填充和描邊模塊(Level3)中除了上表的幾個特性之外,還有fill-break、fill-color、fill-image、fill-origin、fill-position、fill-size
  • 小米雲服務上線文檔在線編輯器:隨時保存歷史版本
    小米雲服務上線新功能——文檔在線編輯器。IT之家獲悉,用戶可以一鍵同步線上文檔——在線編輯,隨時保存歷史版本(當前可支持保存近10次的文檔版本)。從此告別電腦突然關機,Word、Excel等文件罷工閃退時,文件丟失的煩惱。
  • Mac上簡約而不簡單的 Markdown 編輯器:Typora
    我們在用編輯器寫文檔時,為了讓文檔看起來更加舒適和易讀,通常會對文字進行編輯排版,賦予文字各種格式,比如不同的大小、顏色和粗細,在文字前面加有序/無序列表等。常見的文本編輯器比如 Word,它對文字進行排版的方式是靠點擊菜單欄中的功能按鈕來實現,這種編輯器被叫做「富文本編輯器」。
  • 《迷你世界》地形編輯器怎麼獲得 地形編輯器獲取攻略
    導 讀 迷你世界地形編輯器怎麼做?地形編輯器合成方法。
  • 135編輯器「那些我們在「疫」的事」徵文大賽火爆進行中!
    第一名(1名)800元+1份135編輯器1年VIP會員第二名(2名)每人500元+1份135編輯器1年VIP會員無論是在戰「疫」一線奮鬥的最美逆行者,還是在各個崗位上默默堅守的普通人,又或者是居家隔離的我們,都在用自己的方式為打贏這場戰「疫」貢獻著力量。每一個時刻都值得銘記,每一個善舉都應該被看見,每一個行動都不應該被忽視,此時此刻我們所經歷的,都千萬不能忘記。
  • CSS改變SVG顏色
    after {        position: absolute;        top: 0;        left: 0;        width: 31px;        height: 31px;        content: "";        background: url("xxx.svg
  • 「超級筆記」上新背後|人人都在用的編輯器,如何發展到今天
    這其中包括頻繁更新DOM操作帶來的性能問題、多平臺瀏覽器的兼容問題、編輯器狀態維護問題等等,使得最終用戶在使用中有很多編輯體驗方面的問題。在原生在線編輯的基礎上,發展出了基於web技術的初代在線編輯器。
  • 10 個適用於 PC 和行動裝置的免費在線矢量編輯器
    在線矢量編輯器提供了許多強大的編輯工具,可創建專業的藝術作品、令人驚嘆的拼貼畫和設計。什麼是在線矢量編輯器?矢量編輯器軟體有助於在線和印刷版製作有吸引力的矢量圖形,例如徽標、模型、演示文稿、小冊子和其他營銷和品牌材料。在線矢量編輯器提供預先構建的資產,如圖標、字體、圖像和片段,以幫助用戶釋放他們的創造力。