首页 > 其他分享 >svg clipPath的clipPathUnits和相对路径转换

svg clipPath的clipPathUnits和相对路径转换

时间:2023-06-21 10:44:45浏览次数:41  
标签:clipPathUnits svg userSpaceOnUse 相对路径 objectBoundingBox clipPath

clipPathUnits 属性用来指定<clipPath>元素内容的坐标系,有2种取值:

clipPathUnits = "userSpaceOnUse | objectBoundingBox"

clipPathUnits = "userSpaceOnUse | objectBoundingBox"

userSpaceOnUse表示当前网页所使用的屏幕坐标系

objectBoundingBox则把坐标空间的原点调整到被裁剪对象的左上角,坐标空间的长宽设定为该元素的长宽


通常工具生成的svg路径,都是基于userSpaceOnUse的,并且还可能带一些变换(如位移和缩放)

<g transform="translate(0.000000,126.000000) scale(0.100000,-0.100000)"><clipPath>

而在CSS3直接引用clipPath时,不会自动去处理这些变换,需要我们自己来处理,直接引用进行裁切是达不到效果的

.element {
    clip-path: url(#svgClipPathID);
}

需要将基于userSpaceOnUse的路径,转换为基于objectBoundingBox的路径,即将 绝对路径 转换为 相对路径

做法是把path数据转换成百分比或小数(小数更短一些,含义相同,都是相对单位),然后给clipPath添加clipPathUnits="objectBoundingBox"属性来自适应

<svg width="0" height="0">
    <defs>
        <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
            <!-- your paths here -->
        </clipPath>
    </defs>
</svg>

转换可以使用此 工具 

 

参考: 如何实现SVG clipPath自适应被裁剪对象

标签:clipPathUnits,svg,userSpaceOnUse,相对路径,objectBoundingBox,clipPath
From: https://www.cnblogs.com/mengff/p/17495633.html

相关文章

  • SVG 静止无功发生器 源码 dsp+FPGA主板
    SVG静止无功发生器源码dsp+FPGA主板ID:642000606316316265......
  • 封装svg通用组件
    安装vite-plugin-svg-icons插件pnpmivite-plugin-svg-icons-D在main.ts中引入vite-plugin-svg-iconsimport'virtual:svg-icons-register'创建src/assets/icons目录,用来存放svg图片配置vite.config.tsimport{createSvgIconsPlugin}from'vite-plugin-svg-......
  • 修改svg图标颜色方法
    1.直接修改svg文件中fill属性2.使用css修改svg图标的fill属性仅对内联svg有效3.使用currentColor只对html中内联的svg有效,包括symbol和use,对background中svg无效修改svg文件中的fill属性为currentColor,在父级使用color改颜色,或者使用css样式svg{fill:red}修改svg图标......
  • chrome:保存页面上的svg(chrome 114)
     一,复制svg在开发者工具中,选中要复制的svg然后在svg上右键->copy->copyelement二,保存成文件在sublime或其他编辑工具中粘贴,file->save->保存成wordpress.svg注意:此处的width/height两项可以按自己的需求修改说明:刘宏缔的架构森林—专注it技术的博客,网站:https://bl......
  • C#/VB.NET:快速而简单的免费SVG到PDF转换技巧
    在日常工作中,我们常常需要将SVG转换为PDF格式。这是因为SVG格式的图像在打印时可能会出现问题,例如失去分辨率或无法正确适应纸张大小。与此相比,PDF格式则专门用于打印和共享文档,可以确保高质量输出,并且能够自动适应不同的纸张大小。在本文中,我们将介绍如何使用编程方式将SVG文件转......
  • Qt+QtWebApp开发笔记(六):http服务器html实现静态相对路径调用第三方js文件
    前言  前面做了一些交互,网页是直接通过html对response进行返回的,这里QtWebApp与传统的web服务器不同,传统的web服务器可以调用同级目录相对路径或者绝对路径下的js,而QtWebApp的httpserver是response返回当前页面的问题,默认是无法调用的。  为了解决调用一些依赖的如echarts......
  • 封装前端svg组件
    前言:SVG(ScalableVectorGraphics)是一种基于XML的矢量图形格式,它可以在网页上展示高质量的图像,并且可以无损缩放。在前端开发中,SVG图片被广泛用于创建图标、图形和动画效果。此篇文章将讲述在前端vue项目中封装svg组件,使其svg简单使用。1.首先创建svg组件:示例代码<template......
  • java中相对路径,绝对路径问题总结
    java中相对路径,绝对路径问题总结2007-12-2000:191.基本概念的理解绝对路径:绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径)例如:C:\xyz\test.txt代表了test.txt文件的绝对路径。http://www.sun.com/index.htm也代表了一个URL绝对路径。......
  • 浅谈MultipartFile中transferTo方法的坑 服务器上面使用相对路径 file.transferTo(fil
    浅谈MultipartFile中transferTo方法的坑服务器上面使用相对路径file.transferTo(filePath.getAbsoluteFile())而不是file.transferTo(filePath.getPath())绝对路径,实际生产配置服务器里面的一个文件夹。比如配置服务器文件夹前缀为/downfile/excelfile原文链接:https://ww......
  • blender svg优化
    1.图片转svghttps://www.visioncortex.org/vtracer/(推荐参数:CUTOUT/130,0100)adobeillustrator(照片高保真度为模板):2.导入blender删除背景多选物体,右键→转换到网格3.布线优化X键→有限融并0.5°(感谢maylog的教程:https://www.bilibili.com/video/BV1......