按照 SVG 路徑圈出

[英]Circle following SVG path

我在 svg 路徑上有粉紅色圓圈和一只眼睛，如下所示： 圓圈和眼睛應該在第一個灰色圓圈上旋轉。 我怎樣才能做到這一點？ 這是我的靈感 (codepen) 。 .ball { width: 20px; height: 20px; background-color: green; border-rad ...

CSS Animation 將頁面上的圖標滾動到路徑

[英]CSS Animation move icon on page scroll to a path

我想創建一個 CSS animation，其中箭頭在滾動時沿着 SVG 蛇形路徑移動，並在每個新部分更改圖標。 這是我的頁面設計供參考。 我看了幾個例子： codepen.io/yesvin/pen/XymwvX codepen.io/gkando/pen/LYEvjOv 但是我無法用我的頁面設 ...

CSS 背景圖像 SVG 覆蓋邊緣

[英]CSS background-image SVG capped on edges

我正在嘗試使用虛線邊框生成器，但在生成的 SVG 中，我注意到邊緣被封住了，有什么想法可以避免這種情況嗎？ .block { width: 400px; height: 400px; background-image: url("data:image/svg+xml,%3csvg width='1 ...

我不明白 SVG 縮放。 Svg 是不是滿了 canvas 寬高

[英]I don't understand SVG scaling. Svg is not it's full canvas width and height

我希望這個 svg 的寬度和高度為 69px。 但它不是縮放或者我不理解 viewbox。 圖片在這里我知道 width 和 height 適用於rect ， path等，而viewbox是 canvas ，其中 svg 位於其中。 正如您從下面的代碼片段中看到的那樣。 svg 是 69px，但里 ...

縮放原點剪切路徑 SVG {相機快門}

[英]Scale Origin Clipped Path SVG {Camera Shutter}

我正在嘗試復制相機快門，看起來好像我的路徑是從左上角縮放的，基於其在剪切路徑中的 position。 我已將變換原點設置為 50%，但它似乎沒有按照我期望的方式工作。 任何援助將不勝感激。 #camera-v3c.cls-2 { fill: #231f20 } #camera-v3c.cls-4 ...

用document.querySelectorAll根據class搜索，文本內容

[英]Search with document.querySelectorAll based on class, text content

我有一個搜索框，可幫助用戶通過此鏈接瀏覽學校的房間。 嘗試搜索基於用戶的輸入，而如果用戶輸入的任何內容與基於 class + SVG 矩形元素（房間號文本或學校 class 名稱）中的文本內容的查詢選擇器匹配，則將用戶帶到特定樓層 +突出房間。 我正在努力解決的部分在這個floors.js 文件中如 ...

當我嘗試將 svg 文件導入組件時，為什么會出現“元素類型無效：應為字符串或類/函數但得到：數字”？

[英]Why am I getting 'Element type is invalid: expected a string or a class/function but got: number' when I try and import an svg file into a component?

當我將 svg 文件導入我的 BottomTabNavigator 時，出現以下渲染錯誤： 元素類型無效：應為字符串（對於內置組件）或類/函數（對於復合組件）但得到：數字。 我如何擺脫這個錯誤？ 我已經安裝了 react-native-svg 和 react-native-svg-transfor ...

僅設置父級高度時顯示 SVG

[英]Display SVG while only setting parent height

我在容器中設置了一個 SVG，如下所示： <div style="height: 24px;"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="0" ...

將 SVG 垂直對齊到可用空間的中心

[英]Vertically align SVG to center of available space

我有一張 Tailwind 卡，它在大屏幕的左側顯示一個 SVG 圖標，在中等大小的屏幕和更小的屏幕上顯示在頂部。 我可以沿 x 軸對齊圖標。 但是，在 y 軸上我無法正確處理。 我使用了一些填充類，它們可以完成一些工作。 因為我可以將圖標從頂部移開，但這也會在圖標和下面的文本之間增加額外的空間。 ...

如何防止硬編碼下面的 CSS animation？

[英]How can I prevent hard coding the CSS animation below?

我正在使用@keyframes為這個 svg 設置動畫： .candles { width: -webkit-fill-available; transition: all 0.5s; }.candles line, path{ stroke: #5ABCF3; animation-name: ...

無法在本機反應中導入 svg：這些文件都不存在

[英]unable to import svg in react native : None of these files exist

我正在嘗試導入 svg，我使用transform.tools 將其轉換為 jsx。 但是，當我嘗試將它導入我的組件時，它說unable to resolve module: none of these files exist 。 我檢查了導入行中的路徑，沒問題。 這是文件夾結構： 我想在 PlayB ...

將字形的 SVG 路徑轉換為字形表示的字符

[英]Convert SVG path of a glyph to the character the glyph represents

這個有效的 CodePen 演示顯示了一個表示為向量的數字。 請問demo中的數字向量（SVG格式）如何轉換為實數？ 從我在 web 上的搜索，Tesseract 不讀取矢量圖形 (SVG)，任何人都可以展示一些如何讀取數字矢量的演示或示例嗎？ 例如，下面的矢量圖形代碼在 console.log 中 ...

是否可以對網頁上未知大小的矢量圖形進行像素提示？

[英]Is it possible to have pixel hinting on vector graphics of an unknown size on a webpage?

屏幕字體中的字形通常使用提示將形狀與屏幕像素對齊，因此結果具有銳利的邊緣。 我可以對網頁上的任意矢量圖形做類似的事情嗎？ 我知道我可以將矢量圖形中的線條與像素對齊，但這僅適用於默認大小及其 integer 的倍數。 我的想法是，該圖形將具有類似於字體中使用的暗示，以在所有尺寸下都具有銳利的邊緣。 ...

如何將圓錐漸變應用於 svg 筆畫？

[英]How to apply conic gradient to svg stroke?

知道怎么做嗎？ 期待這個： https://codesandbox.io/s/how-to-apply-conic-gradient-to-svg-stroke-cbx37l ...

SVG 蒙版路徑被裁剪

[英]SVG Mask Path is cropped

我正在嘗試構建一個跟隨鼠標 cursor 的動態鏈的 javascript 實驗。 因此，我使用 SVG 和以下路徑： <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 240"> <defs> <pat ...

如何使 SVG 圖像在 react-native 中變得模糊

[英]How to make a SVG image become blurred in react-native

我想使用帶有 2 個模糊角的 svg 在 React Native 中使用漸變背景，但問題是那些模糊角變成了 2 個圓圈。 任何解決方案？ 這是圖像： ...

SVG safari 中的奇怪線條

[英]SVG weird lines in safari

有誰知道為什么這個 SVG： 在 safari 中間用這條線渲染？ 此外，當我嘗試向其中添加變形 animation 時，多條線似乎隨機出現並且很多。 對此有任何幫助，我將不勝感激。 提前致謝。 ...

如何在 Rails 7 應用程序中使用 javascript 更改 svg 上的文本 label 單擊？

[英]How do I change text label on svg click using javascript in Rails 7 app?

用戶可以單擊復選標記圖標將公園標記為已訪問（灰色復選標記）或未訪問（綠色復選標記）。 每次用戶單擊復選標記（在“已訪問”和“未訪問”之間）時，我還想使復選標記圖標旁邊的文本發生變化 - 如果文本也是可點擊區域的一部分，那就更好了。 我是 Javascript 的新手，所以我確定這是基本的，但我不確 ...

NS_BINDING_ABORTED 僅包含 svg 張圖片

[英]NS_BINDING_ABORTED with svg images only

我有一個簡單的 JavaScript 代碼，它在驗證碼圖像刷新時生成等待加載微調器。 該腳本適用於gif圖像，但對於動畫svg圖像，加載微調器不起作用，並且在 FireFox 中在瀏覽器的.network 控制台中返回NS_BINDING_ABORTED 。 這是代碼：$(document).rea ...

使用 react-native-svg 時加載延遲

[英]Loading delay when using react-native-svg

我正在使用react-native-svg來處理 SVG，但我注意到切換到包含 SVG 的堆棧/屏幕時出現延遲。我在react-navigation 6中使用tabBar來切換堆棧/屏幕。 當我在如下屏幕中顯示 SVG 時，我可以注意到在堆棧/屏幕出現之前有大約 0.5-1 秒的小延遲。 如果我刪除 ...