天道酬勤,学无止境

SVG - How to apply a gradient transform matrix to a linear gradient brush?

I'm writing a SVG viewer application in c++ language. I actually face a transform issue in several SVG files that I cannot figure out.

Considering the following SVG file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="svg9686" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="90mm" width="145mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 145 90" xmlns:dc="http://purl.org/dc/elements/1.1/">
 <defs id="defs9680">
  <linearGradient id="linearGradient6593-0" gradientUnits="userSpaceOnUse" x1="74.658" y1="-398.92" x2="75.519" y2="-485.7" gradientTransform="matrix(1.0069 0 0 1.19 1.4571 709.77)">
   <stop id="stop6595" stop-color="#be245a" offset="0"/>
   <stop id="stop6600" stop-color="#e46e6f" offset=".48408"/>
   <stop id="stop6597" stop-color="#f1a769" offset="1"/>
  </linearGradient>
 </defs>
 <g id="layer1" transform="translate(-7.631 -139.36)">
  <rect id="rect3690-4-2-09-4-2-8-0" height="90" width="145" y="139.36" x="7.631" fill="url(#linearGradient6593-0)"/>
 </g>
</svg>

This is basically a rectangle filled with a gradient brush, from orange to magenta. The rectangle size is 90x145, located at coordinates [0, 0] after all the transformations are applied.

If I well understood the theory, to draw the rectangle correctly, I should process the following steps:

  1. Calculate the gradient brush bounding box, given by the x1, y1, x2 and y2 values, in the local document coordinates system. This should be done by applying the given gradient transform matrix to the points computed from x1, y1, x2 and y2
  2. As the gradient units are declared to be "user space on use", calculate the brush from the linear gradient tag values and the transformed bounding box
  3. Transform the rectangle coordinates to fill, to also put it in the document coordinates system
  4. Using the previously created brush, draw the rectangle at his transformed coordinates

Applying the above described process, I expected to reach the following result:

But I get this result:

If I manually change all the values in the above source file, to remove all transformations and apply all the values in the document coordinates, the linear gradient is filled correctly in my rectangle. For that reason, I would be really thankful if somebody could explain to me

  1. What I'm doing wrong in my process?
  2. How I should calculate the linear gradient values?
  3. How should I apply the gradient matrix to the given values? (i.e. I expected that applying the matrix to the values should transform them in the document system coordinates, so the transformed values should roughly give x1 = 0, y1 = 0, x2 = 90 and y2 = 145 as result, but it's not the case)

NOTE a demonstration in mathematical form would be welcome

评论

First, using the term "bounding box" for the gradient I think is not helpfull. The four values x1, x2, y1, y2 describe a vector onto which the gradient stops are matched, and to which the gradient normal is perpendicular (before applying any transform). A "box" has no meaningfull relation to the gradient properties.

The gradient vector could be visualized as a line element

<line x1="74.658" y1="-398.92" x2="75.519" y2="-485.7" />

The first step is to apply gradientTransform="matrix(1.0069 0 0 1.19 1.4571 709.77)". The resulting line would be drawn as

<line x1="76.6302" y1="235.055" x2="77.4972" y2="131.787" />

(Since the transformation introduces no skew, the gradient normal is still perpendicular to that line.)

At this point, the gradient is applied to the rectangle in its local coordinate system

<rect width="145" height="90" x="7.631" y="139.36"/>
<line x1="76.6302" y1="235.055" x2="77.4972" y2="131.787" />

Only after that, the final transform="translate(-7.631 -139.36)" is applied to both the rectangle and the vector:

<rect width="145" height="90" x="7.631" y="139.36"/>
<line x1="70" y1="95.7" x2="69.87" y2="-7.57" />

Note that this would even be true if the transform had been applied to the rect directly, instead of an enclosing group. Applying the transform to an element is always the last operation to perform.

Where you went wrong, I think, is interpreting userSpaceOnUse as the final coordinate system after applying transforms to the rectangle. But what it is, is the coordinate system

in place at the time when the gradient element is referenced,

thus before further transformations.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Linear gradient not applying in Webkit with d3 generated SVG
    I'm creating a specific implementation for a d3.js graph, and it seems that when creating an SVG document dynamically, linearGradients are not working on Webkit browsers (tested only on Chrome, of the Webkit family), while Gecko is showing the expected behavior. How do I conclude it has to do with dynamic generation, or d3? I tried copying the resulted document into an empty page, and the gradient came to life. The d3 code initializes the document first: // in construction: // ... svg = d3.select(el) .append('svg:svg') .attr('width', width) .attr('height', height), defs = svg.append('svg:defs'
  • 线性渐变不适用于带有 d3 生成的 SVG 的 Webkit(Linear gradient not applying in Webkit with d3 generated SVG)
    问题 我正在为 d3.js 图形创建一个特定的实现,似乎在动态创建 SVG 文档时, linearGradient不能在 Webkit 浏览器上工作(仅在 Webkit 系列的 Chrome 上测试),而 Gecko 正在显示预期行为。 我如何得出结论它与动态生成或 d3 有关? 我尝试将生成的文档复制到一个空白页面中,渐变就栩栩如生了。 d3 代码首先初始化文档: // in construction: // ... svg = d3.select(el) .append('svg:svg') .attr('width', width) .attr('height', height), defs = svg.append('svg:defs'), linearGradient1 = defs.append('svg:linearGradient') .attr('id', 'linear-gradient-1') .attr('x1', 0) .attr('y1', 1) .attr('x2', 6.123233995736766e-17) .attr('y2', 0), linearGradient1Stop1 = linearGradient1.append('svg:stop') .attr('offset', '0%') .attr('stop-color', '
  • GDI+——常用的文字处理技术
    倒影效果的文字思路:通过使用Graphics对象的MeasureString方法和ScaleTransform方法来绘制倒影效果的文字。MeasureString方法。该方法用于测量指定的Font格式绘制的字符串。语法格式如下:public SizeF MeasureString(string text,Font font)参数:text:要测量的字符串。font:Font,它定义字符串的文本格式。返回值:SizeF结构,该结构表示text参数指定的、使用font参数绘制的字符串的大小,单位有PageUnit属性指定。ScaleTransform方法。该方法指定的缩放操作应用于Graphics对象的变换矩阵。语法格式如下:public void ScaleTransform(float sx,float sy)参数说明:sx:x方向的比例因子。sy:y方向的比例因子。 private void button1_Click(object sender, EventArgs e) { Graphics g = panel1.CreateGraphics();//创健控件的Graphics类 g.Clear(Color.White);//以指定的颜色清除控件背景 Brush Var_Brush_Back = Brushes.Gray;//设置前景色 Brush Var_Brush
  • React.js - 使用 svg 线性渐变不起作用(React.js - use svg linear gradient not working)
    问题 我有一个圆圈和一个渐变来填充它,我放入渐变并通过样式填充在路径中调用他。 import React,{PropTyoes} from 'react'; import {connect} from 'react-redux'; import * as Actions from '../controllers/Actions'; export default class MyComp extends React.Component { constructor(props, context){ super(props, context); } render(){ return ( <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 983.4 983.4"> <g> <linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="1041.6901" y1="169.485" x2="1383.9301" y2="169.485" gradientTransform="matrix(1 0 0 -1 -761.14 398.97)"> <stop offset="0
  • 如何在输入框周围制作彩色渐变发光?(How to make a colorful gradient glow around your input-box?)
    问题 我知道对于盒子周围的蓝色发光,我们只需要将下面的代码应用到我们的 CSS 中: .glowing-border { border: 2px solid #dadada; border-radius: 7px; } .glowing-border:focus { outline: none; border-color: #9ecaed; box-shadow: 0 0 10px #9ecaed; } 现在我想将我的输入框提升到一个新的水平。 我希望它看起来像这样 - 而不是蓝色的光芒。 我想要一个漂亮的彩虹渐变效果。 是否有任何 CSS 专家认为这对我来说是可行的? 不必是 CSS,如果有人对如何以不同的方式完成这项工作有任何建议 - 请发表评论或回答。 回答1 我认为你可以通过使用两个额外的divs来做到这一点。 一个是包裹(也有背景渐变),带有用于羽化效果的白色内嵌框阴影,输入区域后面的一个div带有白色背景和外框阴影。 我假设你的表格背景颜色是白色。 .rainbowWrap { width: 200px; background: //your gradient... padding: 4px; box-shadow: inset 0px 0px 5px 3px white; border-radius: 2px; position:relative; z-index
  • Direct2D (11) : 画刷之 ID2D1LinearGradientBrush
    Direct2D (11) : 画刷之 ID2D1LinearGradientBrush TDirect2DCanvas.Brush 的类型是 TDirect2DBrush,它和 GDI 的 TBrush 的区别主要有两点: 1、只保留了 TBrush.Style 中的 bsSolid、bsClear 选项,弃用了:bsHorizontal、bsVertical、bsFDiagonal、bsBDiagonal、bsCross、bsDiagCross。 2、其 Handle 属性是 Direct2D 中的 ID2D1Brush。 Direct2D 提供有四种画刷: ID2D1SolidColorBrush //纯色画刷;TDirect2DBrush 默认使用了它 ID2D1LinearGradientBrush //线性渐变画刷 ID2D1RadialGradientBrush //放射渐变画刷 ID2D1BitmapBrush //位图画刷 ID2D1Brush //是它们的父接口,它提供了透明色和 2D 变换的基础能力。 {相关方法} TDirect2DCanvas.RenderTarget.CreateSolidColorBrush(); //建立纯色画刷 TDirect2DCanvas.RenderTarget.CreateLinearGradientBrush(); /
  • 在 CSS/Jquery 中创建渐变网格(Creating a gradient mesh in CSS/Jquery)
    问题 我不确定这是否可行,但我可以使用 CSS/Jquery 技术来创建渐变网格吗? 类似的东西 我想随机生成这个网格,然后可能动画它,所以我试图避免使用图像。 我不确定这样的事情是否可能。 我在想也许可以创建几层单独的渐变,然后将它们全部分层到一个固定位置并更改它们的不透明度设置? 回答1 目前 几年前,我使用 SVG、HTML5 canvas 标签和最近的 CSS3 渐变尝试了一些类似的方法。 我认为目前没有一种自然的方法可以超越简单的线性或径向渐变。 问题是是否可以仅使用简单的线性和径向渐变(这是唯一可用的工具)来模拟网格渐变。 不幸的是,当您使用 opacity 或 rgba 组合多个渐变时,不同渐变的颜色往往会以一种无用的方式组合,从而导致颜色褪色。 避免这种情况需要能够在浏览器中将其呈现为单个复杂渐变。 渐变可以具有的形状也有很大的限制——任意角度的线性渐变和径向对称的椭圆渐变。 两者都不允许自由形式的不规则形状。 可应用于结果图像的 2D 变换本质上也相当规则(缩放、倾斜等)。 将来 在不久的将来,我所知道的最有希望的选择是可能支持 SVG 2.0 中的网格渐变(也许还有扩散曲线)。 如果确实发生了这种情况并且浏览器最终支持它,那应该会开始大大扩展选项。 不久之后,HTML5 canvas 标签和 CSS3 可能会出现。 正如@vals 在下面的评论中指出的那样
  • CSS3 以循环方式线性渐变(CSS3 Linear Gradient in a circular way)
    问题 我想知道是否可以用 css 渐变做这样的事情: 我搜索了很多,所有的渐变都是“线性”或“径向”。 我想要的渐变是以圆形的方式线性的! 回答1 恐怕 CSS 不允许线性径向渐变。 然而,svg 提供了一个解决方案,尽管很粗糙。 请参阅以下主题以获取解决方案。 如何通过 svg 绘制线性渐变圆? 圆形笔划上的 svg 多种颜色 回答2 现在是可行的——至少在 Chrome 中是这样。 CSS 属性 conic-gradient 可以轻松实现这一点: html, body { margin: 0; padding: 0; } .box { position: absolute; width: 200px; height: 200px; left: 100px; } .colorwheel { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); border-radius:50%; } .fallback { text-align: center; padding: 50px 0; } <div class="fallback box"> If you can read<br>this, your browser<br>doesn't support<br>conic-gradient
  • 如何用CSS斜穿(How to strike through obliquely with css)
    问题 我需要这样的东西: 如何使用CSS做到这一点? 我知道一种方法是使用背景图片,但是我可以仅使用css来实现此功能而没有任何图片吗? 回答1 使用:before伪元素,有一种骇人听闻的方法。 您:before边框:before加上:before ,然后使用CSS变换旋转它。 这样,就不会在DOM中添加任何额外的元素,添加/删除删除线就像添加/删除类一样简单。 这是一个演示 注意事项 这仅适用于IE8。 IE7不支持:以前,但会在做支持的浏览器优雅降级:before但不支持CSS变换。 旋转角度是固定的。 如果文本较长,则该行将不会接触文本的角。 请注意这一点。 的CSS .strikethrough { position: relative; } .strikethrough:before { position: absolute; content: ""; left: 0; top: 50%; right: 0; border-top: 1px solid; border-color: inherit; -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -ms-transform:rotate(-5deg); -o-transform:rotate(-5deg); transform:rotate(
  • SVG角度梯度(SVG angular gradient)
    问题 有没有办法在SVG中进行“角度渐变”? (我不知道官方用语-这是您在拾色器中看到的那种渐变,它随角度而变化。) SVG似乎仅支持线性和径向渐变,但我认为可能存在某种使用变换来模拟所需内容的方法。 谢谢! 回答1 没有标准支持来进行角度(圆锥形)渐变。 但是请参阅http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient了解一些近似方法(不过不包括源代码)。 该链接上的示例不起作用。 回答2 ...十年后... CSS现在支持锥形渐变,尽管在撰写本文时浏览器的支持是混合的。 您可以将<clipPath />应用于<foreignObject />其内容使用CSS圆锥形渐变来达到所需的效果。 https://codepen.io/eastonium/pen/abOpdEm 回答3 这是使用模式的方法:https://jsfiddle.net/prozoroff/8eodzrke/ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800"> <defs> <linearGradient id="Gradient1" gradientTransform="rotate(90)"> <stop
  • Qt开发技术:Qt绘图系统(一)绘图系统介绍
    若该文为原创文章,未经允许不得转载 原博主博客地址:https://blog.csdn.net/qq21497936 原博主博客导航:https://blog.csdn.net/qq21497936/article/details/102478062 本文章博客地址:https://blog.csdn.net/qq21497936/article/details/105505710 各位读者,知识无穷而人力有穷,要么改需求,要么找专业人士,要么自己研究 红胖子(红模仿)的博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等)持续更新中...(点击传送门) Qt开发专栏:开发技术(点击传送门) 《Qt开发技术:Qt绘图系统(一)绘图系统介绍》 《Qt开发技术:Qt绘图系统(二)QPainter详解》 前话 红胖子,来也! Qt的图形绘制系统,(分为2D图形和3D图形,本篇章主要介绍2D图形绘制系统)。 Qt绘图系统 Qt5中的图形主要是通过命令式QPainter API或Qt的声明性UI语言Qt Quick及其场景图后端来完成的。Qt5的图形功能还包括对打印以及加载和保存各种图像格式的支持 QPainter绘制2D图形 QPainter提供了将矢量图形、文本和图像绘制到不同面(可理解为画布
  • 如何在CSS中绘制圆扇形?(How to draw a circle sector in CSS?)
    问题 好了,用纯CSS画一个圆很容易。 .circle { width: 100px; height: 100px; border-radius: 100px; border: 3px solid black; background-color: green; } 我如何划界? 给定度数X [0-360],我想绘制一个度数X的扇形。 我可以使用纯CSS做到这一点吗? 例如: 谢谢+示例 谢谢乔纳森,我用了第一种方法。 如果对某人有帮助,这里有一个JQuery函数的示例,该函数获取百分比并绘制一个扇区。 扇形位于百分比圆的后面,此示例显示了如何从起始角度开始围绕圆的圆弧。 $(function drawSector() { var activeBorder = $("#activeBorder"); var prec = activeBorder.children().children().text(); if (prec > 100) prec = 100; var deg = prec * 3.6; if (deg <= 180) { activeBorder.css('background-image', 'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient
  • CSS3 三角形/切出边框(CSS3 Triangle/cut-out Border)
    问题 我想知道是否有一种“简单”的方法可以使用 CSS3 执行以下操作,我想避免使用图像和绝对定位或类似方法,并且更愿意使用一些 CSS 方法来实现这一点。 我也想避免对这种样式使用任何固定的高度,因为我将在大小和颜色各不相同的各种元素上使用相同的样式。 回答1 您可以在 CSS 中使用简单的剪辑路径: clip-path:polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); 结果(在 Chrome 中): 在线演示 但请注意,对所有浏览器的支持并不是那么好。 目前,据我所知,它在 FF 中不起作用(我相信您可以将 SVG 用于 FF)。 更新 好吧,在玩过 SVG(我不是 SVG 专家)之后,我想出了一个在 FF 中工作的“原型”: 在 HTML 中: <!-- For firefox --> <svg class="svg-graphic" width="250" height="36" viewBox="0 0 250 36" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1"> <clipPath id="mask"> <polygon points="0, 0, 250, 0, 235, 18
  • CSS-各种颜色的圆形边框(CSS - circle border with various colors)
    问题 有谁知道如何在CSS中创建它,或者甚至有可能。 我知道如何制作四分之一圆,但是我不确定如何以这种格式应用它。 边框的小块需要使用不同的颜色。 回答1 您已经有了很好的答案。 只是给您另一种获得此结果的方法,您可以在多个背景下进行操作。 关于这种方法的好消息是您只需要一个div。 .test { margin: 25px 0; width: 200px; height: 200px; border-radius: 50%; border: 12px solid transparent; background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat; background-image: linear-gradient(white, white), linear-gradient(30deg, red 36%, lightgrey 30%), linear-gradient(120deg, yellow 36%, lightgrey 30%), linear-gradient(300deg, blue 36%, lightgrey 30%), linear-gradient(210deg, green 36%, lightgrey 30%)
  • 我可以沿SVG路径应用渐变吗?(Can I apply a gradient along an SVG path?)
    问题 我想在我的网站上放置一个由脚本触发的简单加载指示器。 它应该是一个简单的圆弧,该圆弧具有渐变并且在用户等待时正在旋转。 我还没有尝试动画部分,但是暂时停留在静态样式上。 到目前为止,这是我得到的: <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <defs> <linearGradient id="grad1"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="red" stop-opacity="0" /> </linearGradient> </defs> <path d="M50 10 A40 40 0 1 0 90 50" stroke="url(#grad1)" stroke-width="10" fill="transparent"/> </svg> 它从逆时针的顶部边缘到右侧边缘(270°)绘制了圆弧,但是渐变是错误的。 弧线笔触的结果图像在屏幕空间中从左到右着色,而不是遵循使路径(起点(上边缘,0°)不透明,末端(右边,270°))透明的路径。 如何使渐变遵循弧形路径? 回答1 迈克·博斯托克(Mike Bostock
  • 使CSS3三角形具有线性渐变(Make CSS3 triangle with linear gradient)
    问题 我需要在一侧带有三角形的按钮(例如http://css-tricks.com/triangle-breadcrumbs/ )创建带有线性垂直渐变和边框的按钮,并且我想使用纯CSS3。 如果我需要45deg的“三角形”就可以了,我只是这样写 .button:after { -webkit-transform: rotate(45deg); background: -webkit-linear-gradient(-45deg, #fff, #000); content: ''; width: 2em; height: 2em; display: block; } 并将该伪元素的一半隐藏在.button下(因此,只有另一半可见,如三角形)。 但是,如果我需要另一个角度(例如,更陡峭的角度),则无法使用标准XY进行旋转和缩放。 我可以使用2个div,一个用于三角形的上半部,一个用于底部,但是边框和渐变可能存在问题。 也许可以使用带有色标的多个渐变来做到这一点? 回答1 我希望这对您有帮助,我只用纯CSS制作了仅用一个div组成的渐变三角形。 http://jsfiddle.net/NDJ3S/15/ 更新 现在检查它是否正常工作:-http://jsfiddle.net/NDJ3S/17/ 回答2 所以我知道您想使用CSS来做到这一点,但是我总是在SVG中做到这一点: <svg
  • 可以将边界半径与具有渐变的边界图像一起使用吗?(Possible to use border-radius together with a border-image which has a gradient?)
    问题 我正在对具有圆形边框(边界半径)的输入字段进行样式设置,并尝试向该边框添加渐变。 我可以成功制作渐变色和圆角边框,但是两者不能一起使用。 它可以是不带渐变的圆角,也可以是带渐变的边框,但不带圆角。 -webkit-border-radius: 5px; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%; 无论如何,两个CSS属性可以一起工作,还是不可能? 回答1 根据W3C规范,可能是不可能的: 框的背景而不是其边框图像被裁剪为适当的曲线(由“ background-clip”确定)。 剪切到边框或填充边缘的其他效果(例如“可见”以外的“溢出”)也必须剪切到曲线。 始终将被替换元素的内容修剪到内容边缘曲线。 同样,边界边缘曲线外的区域不接受代表该元素的鼠标事件。 这很可能是因为border-image可能会采用一些潜在的复杂图案。 如果您想要一个圆角的图像边框,则需要自己创建一个。 回答2 这是可能的,并且不需要额外的标记,而是使用:: after伪元素。 它涉及在下面放置一个带有渐变背景的伪元素并将其剪切。 这适用于所有当前没有供应商前缀或黑客(甚至是IE)的浏览器,但如果要支持IE的老式版本,则应考虑纯色后备,JavaScript和
  • 绘制带有倒角边缘的双弯曲项目(Draw double curved item with beveled edges)
    问题 我正在创建一个网站,标题/菜单位于顶部。 中间有一个徽标。 为了强调这一点,我将椭圆绝对定位在徽标下方:因此,在下面,您会看到椭圆,它与菜单的其余部分完美融合。 .ellips { border-radius: 50%; height: 130%; background: white; left: 0px; right: 0px; z-index: 1; position: absolute; top: 6%; border: 2px solid #dfe0e4; } 现在客户希望看到左右“拐角”也弯曲: 我知道,“在菜单下方插入省略号”方法是不够的。 我在考虑2种可能的解决方案: 用曲线创建一个SVG,并将其放置在菜单下方。 我已经尝试过该解决方案,但是我不是SVG专家,所以我去尝试了CSS方法: 尝试使用以下曲线创建CSS项目(div):在其上方为白色,在其下方为透明。 将dat项目放在菜单下方。 我更喜欢CSS解决方案,因为我不是SVG的大人物。 但是,如果可以使用SVG轻松实现这一目标。 然后,我将使该解决方案脱轨。 编辑:您看到的蓝色背景是一个底图。 因此,这需要透明。 椭圆需要涂成白色。 回答1 我创建了2个SVG示例,因此您可以选择将背景应用于何处 Codepen示范 每个SVG元素的外部容器都具有特定的长宽比,因此整个元素可以响应(但是,当然
  • 使用CSS偷工减料(Cut Corners using CSS)
    问题 我想“削减” div的左上角,就像您将页面的角向下折叠一样。 我想用纯CSS做到这一点,有什么方法吗? 回答1 如果父元素具有纯色背景,则可以使用伪元素创建效果: div { height: 300px; background: red; position: relative; } div:before { content: ''; position: absolute; top: 0; right: 0; border-top: 80px solid white; border-left: 80px solid red; width: 0; } <div></div> http://jsfiddle.net/2bZAW/ PS即将出现的边框角形状正是您所需要的。 太糟糕了,它可能会超出规格范围,并且永远不会在野外出现在任何浏览器中:( 回答2 如果需要透明的切边,可以将旋转的伪元素用作div的背景,并将其定位以切出所需的角: body { background: url(http://i.imgur.com/k8BtMvj.jpg); background-size: cover; } div { position: relative; width: 50%; margin: 0 auto; overflow: hidden; padding: 20px; text
  • 背景图像,线性渐变锯齿状边缘结果需要平滑边缘(background image, linear gradient jagged edged result needs to be smooth edged)
    问题 我正在尝试使图像底部指向下方。 我试图通过在底部产生两个三角形来获得这种效果。 他们必须做出回应。 在互联网上搜索了很多无法满足我要求的示例之后,这是迄今为止我设法制作的最好的示例。 body, html { height: 100% } .image { width: 1410px; margin-right: auto; margin-left: auto; height: 500px; overflow: hidden; position: relative; } .pointer { height: 50px; position: absolute; bottom: 0; left: 0; width: 100%; } .triangleWrapper { width: 50%; height: 50px; float: left; } .lefttriangle { width: 100%; height: 10px; left: 0px; top: 0px; background-image: linear-gradient(to right top, #ffffff 50%, transparent 50%); } .righttriangle { width: 100%; height: 10px; right: 0px; top: 0px