- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 svg 文件中应用所有转换矩阵时遇到问题。
如果文件只包含路径,而没有渐变 - 一切正常。但是在对linearGradient 添加和应用gradientTransform 之后会导致渲染错误。
算法:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="linearGradient3755">
<stop offset="0" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<linearGradient id="linearGradient3761" xlink:href="#linearGradient3755" x1="16.162441" y1="66.128159" x2="117.17769" y2="66.128159" gradientUnits="userSpaceOnUse" />
</defs>
<g transform="translate(0,-924.36218)">
<g transform="matrix(0.95516166,-0.46694301,0.71994792,0.61949768,-706.90347,408.6637)">
<path d="M 2.1428571,3 L 126.07143,3 L 126.07143,123 L 2.1428571,123 z" transform="translate(0,924.36218)" style="fill:#ff0000;fill-opacity:1;stroke:none" />
<path d="M 16.162441,21.428905 L 117.17769,21.428905 L 117.17769,110.8274 L 16.162441,110.8274 z" transform="matrix(0.96592583,-0.25881905,0.25881905,0.96592583,-17.36888,938.82017)" style="fill:url(#linearGradient3761);fill-opacity:1;stroke:none" />
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="linearGradient3755">
<stop offset="0" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<linearGradient id="linearGradient3761" xlink:href="#linearGradient3755" y1="95.70844949469" x1="26.6443734054997" y2="33.95075671356" x2="101.020294143975" gradientUnits="userSpaceOnUse" />
</defs>
<path fill="#f00" d="M -37.2023,57.8018 C -37.2023,57.8018 81.1699,-.0654 81.1699,-.0654 81.1699,-.0654 167.5631,74.2746 167.5631,74.2746 167.5631,74.2746 49.1909,132.1418 49.1909,132.1418 z" />
<path fill="url(#linearGradient3761)" d="M -15.4903,74.3628 C -15.4903,74.3628 58.8856,12.6051 58.8856,12.6051 58.8856,12.6051 143.155,55.2964 143.155,55.2964 143.155,55.2964 68.7791,117.0541 68.7791,117.0541 z" />
</svg>
最佳答案
只要您的变换矩阵不,您的算法就是正确的歪斜 梯度。
在您的情况下,应用于渐变的最终转换是translate(0,-924.36218) matrix(0.95516166,-0.46694301,0.71994792,0.61949768,-706.90347,408.6637) matrix(0.96592583,-0.25881905,0.25881905,0.96592583,-17.36888,938.82017)
这与matrix(0.7363,-0.6113,0.9426,0.4775,-47.6376,74.0101)
这相当于translate(-47.6376, 74.0101) rotate(-39.7) scale(0.957, 0.9695) skewX(23.4337)
如果最后skew(23.4337)
不在那里,一切都应该按您的意愿工作。
在不使用 gradientTransform
的情况下实现倾斜效果非常困难,或者更准确地说我应该说不可能。属性。根据SVG 1.1 Specification :
gradientTransform contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient.
gradientTransform
属性。
关于svg - 将gradientTransform应用于linearGradient,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17278158/
我是一名优秀的程序员,十分优秀!