svg 相关问题

我正在尝试通过在 SVG 中嵌入 JavaScript 来使用 JavaScript 创建交互式 SVG 代码。我不知道这是否是正确的方法：我正在尝试通过将 JavaScript 嵌入到 SVG 中，使用 JavaScript 创建交互式 SVG 代码。我不知道这是否是正确的方法： <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" onkeypress="move()"> <script type="text/javascript"> <![CDATA[ var x; var y; function move() { x = new Number(svg.getElementsByTagName("circle")[0].getAttribute("cx")); y = new Number (svg.getElementsByTagName("circle")[0].getAttribute("cy")); switch (event.keyCode) { case 119: y--; y = y.toString(); svg.getElementsByTagName("circle").setAttribute("cy",y); break; case 115: y++; y = y.toString(); svg.getElementsByTagName("circle").setAttribute("cy",y); break; case 97: x--; x = x.toString(); svg.getElementsByTagName("circle").setAttribute("cx",x); break; case 100: x++; x = x.toString(); svg.getElementsByTagName("circle").setAttribute("cx",x); break; default: } } ]]> </script> <rect x="0" y="0" height="500" width="500" style="stroke-width:1; stroke:black; fill:white"></rect> <circle cx="250" cy="250" r="50" stroke="red" stroke-width="1" fill="red"></circle> </svg> 本来应该有一个随 wasd 一起移动的球，但球却不动。我做错了什么？这是我编写的工作版本： svg { height: 178px; width: 600px; border: solid 1px; } <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="250" cy="100" r="50" fill="red" /> <script type="text/javascript"><![CDATA[ var KEY = { w:87, a:65, s:83, d:68 }; var moveSpeed = 5; var circle = document.getElementsByTagName("circle")[0]; var x = circle.getAttribute('cx')*1, y = circle.getAttribute('cy')*1; document.documentElement.addEventListener('keydown',function(evt){ switch (evt.keyCode){ case KEY.w: circle.setAttribute('cy',y-=moveSpeed); // Alternatively: // circle.cy.baseVal.value = (y-=moveSpeed); break; case KEY.s: circle.setAttribute('cy',y+=moveSpeed); break; case KEY.a: circle.setAttribute('cx',x-=moveSpeed); break; case KEY.d: circle.setAttribute('cx',x+=moveSpeed); break; } },false); ]]></script> </svg> 一些注意事项：不要一次又一次地重新获取对圆的引用。让您的代码DRY可以使其更加健壮，减少输入，并且（在这种情况下）执行速度更快。编辑：如果您无法根据上面的代码弄清楚如何执行此操作，请发布任何不适合您的代码。不要依赖全局 event 对象；这是老IE的废话。使用传递给事件处理程序的事件对象。编辑：如果您在代码中引用 event 而没有使用该名称的参数或局部变量，则您假设将存在一个全局 event 对象集。相反，请参阅我为您编写的代码，其中显示事件处理程序传递了一个 event 对象。通过给它一个名称，例如我给它命名为 evt，您将收到一个特定于您的事件处理程序的事件对象。由于您正在修改 x 和 y 变量，因此无需每次按键时重新获取 cx 和 cy 属性。编辑：在您的原始代码和您接受的答案中，您已在事件处理程序之外声明 var x，并且在事件处理程序的开头有 x = ...，然后在其中一个事件中声明 x++处理程序。您可以每次重新获取 x 的当前值（就像您所做的那样）然后 setAttribute(...,x+1)，或者（就像我所做的那样）您只能在事件处理程序之前获取属性 once 的值，然后假设每次处理按键事件时该值都是正确的。不要将 JavaScript 事件处理程序放在元素上，而是以编程方式附加它们。编辑：在您的 SVG 标记中，您有：<svg ... onkeypress="move()">。在 HTML 中将行为与标记混合是一个非常糟糕的主意，在 SVG 中也是一个坏主意。不要使用 onfoo="..." 属性来描述元素上发生事件时应该发生的情况，而是使用 addEventListner() 通过代码附加事件处理程序，而无需编辑 SVG 标记。在将数字设置为属性之前，无需将数字强制转换为字符串。如果您希望它在所有浏览器中工作，请使用 keydown 和我上面提供的 ASCII 事件代码，而不是 keypress 和您使用的奇数。编辑：您在另一篇文章中抱怨说您无法执行此操作，因为您希望在按住按键时重复处理事件处理程序。请注意，您想要的行为是通过我在 Chrome、Safari、Firefox 和 IE 中的示例代码实现的（我没有 Opera 来测试）。换句话说，keydown 按您想要的方式工作，无论您认为它应该如何表现。编辑 2：如果您想在文档顶部包含一个脚本块，在创建所有元素之前，您可以执行如下操作： <svg ...> <script type="text/javascript"> window.addEventListener('load',function(){ var circle = ...; document.rootElement.addEventListener('keydown',function(evt){ ... },false); },false); </script> ... </svg> 外部函数只会在页面加载后运行，因此您可以确保存在引用它们的元素。您可以通过在 svg 标签中声明 script 标签来将脚本 js 添加到 svg 代码中： <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"> ... <script type="text/javascript"> window.addEventListener('load',function(){ alert('Hi') }) </script> </svg> 这适用于 Chrome。您遇到了一些错误，例如有时仅对 getElementsByTagName 建立索引。另外，最大的问题是 onkeypress 属性没有绑定。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" > <script type="text/javascript"> <![CDATA[ var x; var y; function move() { x = new Number(document.getElementsByTagName("circle")[0].getAttribute("cx")); y = new Number (document.getElementsByTagName("circle")[0].getAttribute("cy")); switch (event.keyCode) { case 119: y--; y = y.toString(); document.getElementsByTagName("circle")[0].setAttribute("cy",y); break; case 115: y++; y = y.toString(); document.getElementsByTagName("circle")[0].setAttribute("cy",y); break; case 97: x--; x = x.toString(); document.getElementsByTagName("circle")[0].setAttribute("cx",x); break; case 100: x++; x = x.toString(); document.getElementsByTagName("circle")[0].setAttribute("cx",x); break; default: } } document.documentElement.addEventListener("keypress", move); ]]> </script> <rect x="0" y="0" height="500" width="500" style="stroke-width:1; stroke:black; fill:white"></rect> <circle cx="250" cy="250" r="50" stroke="red" stroke-width="1" fill="red"></circle> </svg> 简单示例 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M90,18c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#CCC" stroke="#DDD" stroke-width="2" stroke-linejoin="round"/> <path d="M87,15c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#00F"/> <script> alert("Hello world"); </script> </svg>

javascript svg interactive

回答 4 投票 0

SVG 在 StoryBook 中不显示（React / Vite

我有一个 SVG 组件。它有很多SVG并使用文件夹名称和文件名称来选择。它可以工作，但 StoryBook 不加载 SVG。所有使用 SVG 的组件显示不正确。我用维特。我有...

reactjs svg vite storybook

回答 1 投票 0

使用蜡染光栅器将 SVG 图像转换为 PNG/JPEG 时拉伸它？

我目前正在尝试使用蜡染光栅化库将一些 .svg 图像渲染为 .png/.jpg 图像。如果我尝试在其纵横比内转换图像，一切都会正常，但是当我尝试时......

java svg png jpeg batik

回答 1 投票 0

如何将 rehype-inline-svg 插件与 Astro 一起使用？

我有一个 Astro 项目，使用 Markdown 内容集合来发布博客文章。在这些帖子中，我引用了 svg 图像，如下所示： ![image-1](/assets/images/image-1.svg) 这显示了...

svg astrojs

回答 2 投票 0

从react-icons组件获取SVG

我需要从react-icon组件获取svg元素，以使用不同的Javascript库渲染图像。我正在使用 paperjs 作为我正在开发的这个演示的绘图引擎，用于 UI ...

javascript reactjs svg paperjs

回答 3 投票 0

android如何将SVG加载到imageView中

我尝试将SVG路径加载到imageView中，但我不能例如，我有 SVG 路径作为字符串 ” 我尝试将 SVG 路径加载到 imageView 中，但我不能例如，我有 SVG 路径作为字符串 "<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.48918 13.6276C6.70383 13.0193 7.37699 12.6841 7.98482 12.8979C8.59265 13.1117 8.89133 13.7854 8.67782 14.3938C8.33132 15.3794 8.16683 16.4263 8.16683 17.4949C8.16683 18.572 8.36283 19.64 8.71399 20.6325C8.92864 21.2403 8.59148 21.8766 7.98482 22.0919C7.37699 22.3072 6.70501 22.0065 6.48918 21.3988C6.0505 20.1567 5.8335 18.8386 5.8335 17.4949C5.8335 16.1619 6.05634 14.861 6.48918 13.6276ZM26.3225 14.4302C26.1125 13.8209 26.4438 13.1817 27.0528 12.9709C27.6606 12.76 28.3 13.0547 28.5111 13.6641C28.9311 14.8823 29.1668 16.1806 29.1668 17.4949C29.1668 18.8454 28.9545 20.1511 28.5111 21.3988C28.2941 22.0061 27.6233 22.3448 27.0155 22.1285C26.4088 21.912 26.0705 21.24 26.2863 20.6325C26.641 19.6356 26.8335 18.5775 26.8335 17.4949C26.8335 16.4413 26.6597 15.4037 26.3225 14.4302ZM17.5002 24.4999C18.1445 24.4999 18.6668 23.9772 18.6668 23.3324C18.6668 22.6876 18.1445 22.1649 17.5002 22.1649C16.8558 22.1649 16.3335 22.6876 16.3335 23.3324C16.3335 23.9772 16.8558 24.4999 17.5002 24.4999Z" fill="#88B8E9"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 11.0833C10.5 8.82817 12.3282 7 14.5833 7H20.4167C22.6718 7 24.5 8.82817 24.5 11.0833V23.9167C24.5 26.1718 22.6718 28 20.4167 28H14.5833C12.3282 28 10.5 26.1718 10.5 23.9167V11.0833ZM17.5 24.5C18.1443 24.5 18.6667 23.9777 18.6667 23.3333C18.6667 22.689 18.1443 22.1667 17.5 22.1667C16.8557 22.1667 16.3333 22.689 16.3333 23.3333C16.3333 23.9777 16.8557 24.5 17.5 24.5Z" fill="#88B8E9"/> </svg>" 如何将此路径加载到imageView中你好兄弟试试这个！最好的方法是转到 res->drawable->Vector Asset -> 本地文件（SVG、PSD）->从保存位置选择 SVG 文件。并在您的项目中使用图像您可以使用 Glide 加载 SVG 图像并将其设置到您的 ImageView 上有一个示例。创建SvgDetector.java、SvgDrawableTranscoder.java、SvgModule.java、SvgSoftwareLayerSetter.java后，您可以加载 svg 文件： GenericRequestBuilder<Uri,InputStream,SVG,PictureDrawable> requestBuilder = Glide.with(context) .using(Glide.buildStreamModelLoader(Uri.class, context), InputStream.class) .from(Uri.class) .as(SVG.class) .transcode(new SvgDrawableTranscoder(), PictureDrawable.class) .sourceEncoder(new StreamEncoder()) .cacheDecoder(new FileToStreamDecoder<SVG>(new SvgDecoder())) .decoder(new SvgDecoder()) .placeholder(R.drawable.svg_image_view_placeholder) .error(R.drawable.error_image) .listener(new SvgSoftwareLayerSetter<Uri>()); Uri uri = Uri.parse(svgImageUrl); requestBuilder .diskCacheStrategy(DiskCacheStrategy.SOURCE) .load(uri) .into(imageView); 依赖关系 //AndroidSVG implementation 'com.caverock:androidsvg-aar:1.4' 代码 val str = "\"<svg width=\"35\" height=\"35\" viewBox=\"0 0 35 35\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.48918 13.6276C6.70383 13.0193 7.37699 12.6841 7.98482 12.8979C8.59265 13.1117 8.89133 13.7854 8.67782 14.3938C8.33132 15.3794 8.16683 16.4263 8.16683 17.4949C8.16683 18.572 8.36283 19.64 8.71399 20.6325C8.92864 21.2403 8.59148 21.8766 7.98482 22.0919C7.37699 22.3072 6.70501 22.0065 6.48918 21.3988C6.0505 20.1567 5.8335 18.8386 5.8335 17.4949C5.8335 16.1619 6.05634 14.861 6.48918 13.6276ZM26.3225 14.4302C26.1125 13.8209 26.4438 13.1817 27.0528 12.9709C27.6606 12.76 28.3 13.0547 28.5111 13.6641C28.9311 14.8823 29.1668 16.1806 29.1668 17.4949C29.1668 18.8454 28.9545 20.1511 28.5111 21.3988C28.2941 22.0061 27.6233 22.3448 27.0155 22.1285C26.4088 21.912 26.0705 21.24 26.2863 20.6325C26.641 19.6356 26.8335 18.5775 26.8335 17.4949C26.8335 16.4413 26.6597 15.4037 26.3225 14.4302ZM17.5002 24.4999C18.1445 24.4999 18.6668 23.9772 18.6668 23.3324C18.6668 22.6876 18.1445 22.1649 17.5002 22.1649C16.8558 22.1649 16.3335 22.6876 16.3335 23.3324C16.3335 23.9772 16.8558 24.4999 17.5002 24.4999Z\" fill=\"#88B8E9\"/> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.5 11.0833C10.5 8.82817 12.3282 7 14.5833 7H20.4167C22.6718 7 24.5 8.82817 24.5 11.0833V23.9167C24.5 26.1718 22.6718 28 20.4167 28H14.5833C12.3282 28 10.5 26.1718 10.5 23.9167V11.0833ZM17.5 24.5C18.1443 24.5 18.6667 23.9777 18.6667 23.3333C18.6667 22.689 18.1443 22.1667 17.5 22.1667C16.8557 22.1667 16.3333 22.689 16.3333 23.3333C16.3333 23.9777 16.8557 24.5 17.5 24.5Z\" fill=\"#88B8E9\"/> </svg>\"" val svg = SVG.getFromString(str) val drawable = PictureDrawable(svg.renderToPicture()) imageView.setImageDrawable(drawable) 您可以使用 Glide 库来实现此目的。默认情况下，Glide不支持SVG图像解码，但提供了一种使用您自己的@GlideModule附加此图像的方法。我正在使用 Glide 版本 4.16.0，并进行了一些调整。完整示例项目这里提供了完整的 kotlin 示例项目： https://github.com/hanscappelle/android-glide-svg-example/tree/kotlin-conversion 它基于 Glide 提供的 SVG 示例项目，但转换为 Kotlin 并在可能的情况下进行了简化。请点击此链接查看原始（非 Kotlin）示例 https://github.com/bumptech/glide/tree/v4.16.0/samples/svg 示例代码 app/build.gradle(.kts)中的依赖项和 kapt 配置 plugins { id("com.android.application") id("org.jetbrains.kotlin.android") id("org.jetbrains.kotlin.kapt") } repositories { google() mavenCentral() } dependencies { implementation("com.github.bumptech.glide:glide:4.16.0") implementation("com.caverock:androidsvg:1.4") kapt("com.github.bumptech.glide:compiler:4.16.0") } AppGlideModule 注册 SVGDecoder @GlideModule class SvgModule : AppGlideModule() { override fun registerComponents( context: Context, glide: Glide, registry: Registry ) { registry .register(SVG::class.java, PictureDrawable::class.java, SvgDrawableTranscoder()) .append(InputStream::class.java, SVG::class.java, SvgDecoder()) } // Disable manifest parsing to avoid adding similar modules twice. override fun isManifestParsingEnabled() = false } 和最小的SVGDecoder实施。请注意，在 4.12 版本的 Glide 示例中添加了尺寸处理，这会破坏图像上设置的 scaleType。 class SvgDecoder : ResourceDecoder<InputStream, SVG> { override fun handles(source: InputStream, options: Options) = true @Throws(IOException::class) override fun decode( source: InputStream, width: Int, height: Int, options: Options ): Resource<SVG>? { return try { val svg = SVG.getFromInputStream(source) SimpleResource(svg) } catch (ex: SVGParseException) { throw IOException("Cannot load SVG from stream", ex) } } } 从远程 URI 加载 SVG 图像需要在视图中使用常规 Glide 代码 val svgPath = "https://www.clker.com/cliparts/u/Z/2/b/a/6/android-toy-h.svg" val imageView: ImageView = findViewById(R.id.single_image) Glide.with(baseContext).load(svgPath).into(imageView) 也许这些图书馆可以帮助你 https://github.com/corouteam/GlideToVectorYou https://github.com/ar-android/AndroidSvgLoader https://github.com/androidbroadcast/SvgGlidePlugins

android kotlin svg imageview glide-golang

回答 5 投票 0

使用SVG滤镜创建内部描边

我想在 svg 路径上模拟“内部笔画”。我有一个 svg 地图，其中包含多个复杂路径（国家/地区），每个路径都有不同的填充颜色描边。我想添加一个“假里面

svg stroke svg-filters

回答 4 投票 0

是否可以在SVG中创建发光效果

我正在学习 SVG，我想知道是否可以使用 SVG 以交互方式创建这种发光效果，如下例所示 - 悬停触发效果 - https://codepen.io/

html css svg

回答 3 投票 0

修改SVG路径元素的d属性数据，使生成的路径翻转

我有一个 SVG，其中包含一个绘制特定形状的元素。该路径的坐标包含在路径的“d”属性值中。我需要翻转这个形状