Floyat's questions

两个简单的 SVG 示例，其中包含一个文本元素、一个用于创建弧的 textPath 和一个 textLength 属性集。

在第一种情况下，使用给定的线性渐变来更改文本的颜色。在第二种情况下，使用最简单的填充属性。

在 IOS 设备（Iphone 12、Iphone XR，可能在其他设备上）上观察到显示第一个示例的问题。Chrome 和 Safari 浏览器。我附上屏幕截图，示例1中的文本被截断，示例2中的一切都很好。

在浏览器或安卓设备的桌面上，没有观察到问题，我尝试了大约 5 种不同的设备。

问题是 - 是否有任何解决方案如何在 IOS 设备上使用渐变来修复彩色显示？如您所见，渐变中只有一种颜色。也许有一些 CSS 参数或渐变属性可以解决这个问题？

示例 1

 ​<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" color="red">
           ​<defs>
             ​<linearGradient id="fill">
               ​<stop stop-color="red"></stop>
             ​</linearGradient>
           ​</defs>
           ​<text font-size="28" font-style="normal" font-weight="normal" fill="url(#fill)" transform="rotate(-11, 200, 200)" textLength="463.5587568803267"><defs><path id="text" d="M 200 200 m -168, 0 a 168,168 0 1,0 336,0 a 168,168 0 1,0 -336,0"></path></defs><textPath href="#text" xlink:href="#text" textLength="463.5587568803267">Пример текста по кругу</textPath></text>
           ​
         ​</svg>

示例 2

​<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" fill="red">
           ​<text font-size="28" font-style="normal" font-weight="normal" transform="rotate(-11, 200, 200)" textLength="463.5587568803267"><defs><path id="text" d="M 200 200 m -168, 0 a 168,168 0 1,0 336,0 a 168,168 0 1,0 -336,0"></path></defs><textPath href="#text" xlink:href="#text" textLength="463.5587568803267">Пример текста по кругу</textPath></text>
</svg>

IOS上显示示例1的截图

在IOS上显示示例2的屏幕截图

Alexandr_TT 在 IOS 上的示例截图

任务是用马赛克将图像排成一排，就像他们在freepik.com上所做的那样：

特点：

• 图像总是填满屏幕的整个宽度
• 图像排成一行，每行具有不同的高度
• 图像按照从服务器接收到的顺序排列。图像没有被打乱。
• 图像的高度、宽度不是随机选择的，而是尽可能优化
• 弹性，不是绝对定位
• 最初，图像的路径及其尺寸（宽度、高度）是已知的
• 原始图像是正方形或矩形，所有图像的宽度始终相同（如 freepic - 626px），高度可能不同。

masonry ( https://masonry.desandro.com )、isotope ( https://isotope.metafizzy.co ) 之类的库太可怕了，使用绝对定位，反正也解决不了问题。

我不明白以什么作为计算的基础，因为有几个未知数：不知道需要在行中添加多少图像才能完全填满行，为了理解这一点，你需要确定行的最佳高度。同时，当然，在不同的屏幕尺寸上，最佳高度和连续图像的数量也不同。显然，您需要建立在原始图像的宽度/高度和屏幕的宽度/高度上，但我还不清楚具体如何。

为了方便起见，这是一个添加图像并将尺寸输出作为属性的示例。您需要设置每个 .image 元素的最佳宽度和高度

.container {
  padding: 0 10px;
}

.row {
  margin: 0 -5px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;  
}

.image {
    margin: 0 5px 10px 5px;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="container">
 <div class="row">
  <div class="image" data-w="626" data-h="312">
    <img src="https://image.freepik.com/free-vector/enjoy-summer-3d-realistic-background-with-clouds-daisies-grass-leaves-product-podium_87521-3206.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="521">
    <img src="https://image.freepik.com/free-vector/linear-flat-wedding-monograms_52683-64319.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="442">
    <img src="https://image.freepik.com/free-vector/flat-car-poster-with-photo-horizontal_52683-64510.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="417">
    <img src="https://image.freepik.com/free-vector/gradient-grainy-gradient-shapes_23-2148975080.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="286">
    <img src="https://image.freepik.com/free-photo/city-tornado-doomsday-scene-illustration_456031-22.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="417">
    <img src="https://image.freepik.com/free-vector/gradient-grainy-gradient-texture_23-2148974472.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="417">
    <img src="https://image.freepik.com/free-vector/hand-drawn-blackboard-coffee-collection_79603-1654.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="468">
    <img src="https://image.freepik.com/free-photo/person-putting-medical-mask-earth_23-2148984685.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="626">
    <img src="https://image.freepik.com/free-psd/3d-space-rocket-with-smoke_23-2148938939.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="417">
    <img src="https://image.freepik.com/free-vector/gradient-grainy-gradient-shape-set_23-2148971570.jpg" alt="">
  </div>
 </div>
</div>

https://jsfiddle.net/ru8fzeya/5/

//polygon
function changeStrokePoly() {
   var poly = document.getElementById("poly"),
         isw  = document.getElementById("isw-poly"); 
   poly.setAttribute("stroke-width",isw.value);
};

function changeSizePoly(){
   var poly     = document.getElementById("poly"),
       polyMask = document.getElementById("msk-poly"),
       isz      = document.getElementById("isz-poly"); 
 
   var _getCoordinates = function(scale){
     var viewBox   = 400,
         placeSize = 380 * (scale / 100),
                 h         = placeSize * (Math.sqrt(3) / 2);

            var offsetX = (viewBox - placeSize) / 2,
                offsetY = (viewBox - h) / 2,
                coordinates = [
                    {
                        x : (placeSize / 2 + offsetX),
                        y : offsetY
                    },
                    {
                        x : (offsetX),
                        y : (h + offsetY),
                    },
                    {
                        x : (placeSize + offsetX),
                        y : (h + offsetY)
                    }
                ];
        
        return coordinates;
   }
   
   var coordinates = _getCoordinates(isz.value),
         coordinatesString = coordinates[0].x + ' ' + coordinates[0].y + ' ' + coordinates[1].x + ' ' + coordinates[1].y + ' ' + coordinates[2].x + ' ' + coordinates[2].y;
   
   poly.setAttribute('points', coordinatesString);
   polyMask.setAttribute('points', coordinatesString); 
};

//circle
function changeStrokeCircle() {
   var circle = document.getElementById("circle"),
         isw  = document.getElementById("isw-circle"); 
   circle.setAttribute("stroke-width",isw.value);
};

function changeSizeCircle(){
   var circle     = document.getElementById("circle"),
       circleMask = document.getElementById("msk-circle"),
       isz        = document.getElementById("isz-circle"); 
 
   circle.setAttribute('r', isz.value);
   circleMask.setAttribute('r', isz.value);
};

//rect
function changeStrokeRect() {
   var rect = document.getElementById("rect"),
         isw  = document.getElementById("isw-rect"); 
   rect.setAttribute("stroke-width",isw.value);
};

function changeSizeRect(){
   var rect      = document.getElementById("rect"),
       rectMask  = document.getElementById("msk-rect"),
       isz       = document.getElementById("isz-rect"),
       value     = isz.value,
       maxWidth  = 300,
       maxHeight = 100,
       width     = maxWidth * value / 100,
       height    = maxHeight * value / 100;
  
   rect.setAttribute('width', width);
   rect.setAttribute('height', height);
   
   rectMask.setAttribute('width', width);
   rectMask.setAttribute('height', height);
};

<div>
 <div>
 Polygon--
 <input id="isw-poly" type="range" min="1" value="30" max="219"  oninput="changeStrokePoly()"/>
 <input id="isz-poly" type="range" min="10" value="100" max="100"  oninput="changeSizePoly()"/>
 </div>
 <div>
 Circle-----
 <input id="isw-circle" type="range" min="1" value="30" max="360"  oninput="changeStrokeCircle()"/>
 <input id="isz-circle" type="range" min="10" value="180" max="180"  oninput="changeSizeCircle()"/>
 </div>
 
 <div>
  Rect-------
  <input id="isw-rect" type="range" min="1" value="30" max="100"  oninput="changeStrokeRect()"/>
  <input id="isz-rect" type="range" min="10" value="100" max="100"  oninput="changeSizeRect()"/>
 </div>
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="400" viewBox="0 0 800 400" >
<defs>
<mask id="msk1">
<polygon id="msk-poly" fill="#fff" points="200 35.5 10 364.5 390 364.5"></polygon>
</mask> 
<mask id="msk2">
<circle id="msk-circle" fill="#fff" cx="600" cy="200" r="180"></circle>
</mask>
<mask id="msk3">
<rect id="msk-rect" fill="#fff" x="200" y="-100" width="300" height="100"></rect>
</mask> 
</defs> 
    <polygon id="poly" mask="url(#msk1)" fill="none" stroke-width="30" stroke="red" points="200 35.5 10 364.5 390 364.5"></polygon>
    <circle id="circle" mask="url(#msk2)" fill="none" stroke-width="30" stroke="green" cx="600" cy="200" r="180"></circle>
    <rect id="rect" mask="url(#msk3)" fill="none" stroke-width="30" stroke="blue" x="200" y="-100" width="300" height="100"></rect>
</svg>

有 3 种形状：等边三角形、圆形和矩形。还有用于更改笔画粗细和调整形状大小的滑块。这些数字是相互独立的。正如您在示例中看到的，形状的轮廓仅向内变化。由于遮罩元素和@Alexandr_TT帮助我解决了这个问题，以及这个问题的替代解决方案，外部笔划被剪掉了。

但是由于 使用蒙版/剪辑路径并非一切都是完美的（在此处阅读有关该问题的更多信息），然后我正在寻找一种在方法方面可能更复杂但更通用的解决方案，该解决方案将基于数学和几何。

我希望能够分别使用一个多边形、一个矩形和一个圆形来解决每个形状的问题。没有蒙版，没有剪辑路径和其他外部元素。也就是只需要重新计算三角形的坐标，矩形的宽高和圆的半径。

附加限制：

1. 三角形的坐标、初始半径或圆心的坐标，以及矩形的宽度和高度都是任意的。在示例中，它们的含义只是一个示例。三角形总是等边的（为简单起见）。
2. 您不能更改 viewBox、使用 css、蒙版和剪辑路径。
3. 在任何情况下，笔划都不会超出形状的边界。
4. 描边可以完全“填充”形状内部的背景。
5. 使用滑块调整形状的笔触和大小。
6. SVG 本身可以有许多不同的其他形状和元素，这个决定不应该影响它们。

问题：如何做到这一点？

这是一个示例，其中所有不必要的内容都已删除：https ://jsfiddle.net/ru8fzeya/6/ 只剩下形状和更改笔触粗细/大小。但是 stroke 的默认行为是在两个方向上扩展，您需要获得与示例中使用遮罩但不使用遮罩相同的结果。

有一个任意坐标的等边三角形。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<polygon fill="none" stroke-width="4" stroke="red" points="200 35.45517328095667,10 364.54482671904333,390 364.54482671904333"></polygon>
</svg>

https://jsfiddle.net/6sybjthL/1/

由于 svg 的特殊性，当改变描边的粗细（stroke-width）时，它同时向内和向外扩展。据我所知，svg 1.1 版没有任何属性可以改变这一点，只有几何和数学会有所帮助。

因此有2个问题：

1. 将笔画粗细改为任意值时，应该使用什么公式重新计算三角形的坐标，以使三角形保持等边，并且在视觉上不会向外扩展（即填充三角形的背景）？

2. 如何计算由于只有内部这样的笔划而完全填充三角形的最大笔划大小？

UPD

下面是我尝试为新的 stroke-width=40 值重新计算坐标的示例。（目标是确保绿色三角形不超过红色三角形）

https://jsfiddle.net/xqv3ms8b/9/

有两个svg。

在第一种情况下，svg 有一个给定的 viewBox="0 0 57.21 126.47" https://jsfiddle.net/5jaLdyex/

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.21 126.47">...

在第二种情况下，svg viewBox 被移除。svg 的其余部分保持不变。 https://jsfiddle.net/5jaLdyex/1/

<svg xmlns="http://www.w3.org/2000/svg">...

在第一种和第二种情况下也缺少宽度/高度。

问题：如何确定 svg #2 的比例？我确定可以这样做，因为如果您将此 svg 加载到画布构造函数中，那么即使未设置宽度/高度/视图框，它也会确定 57.21 126.47 的大小。

有一个简单的svg

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" color="red">
  <polygon fill="none" stroke-width="4" stroke="red" points="171.14 230.86,200 171.14,230.86 230.86"></polygon>
</svg>

https://jsfiddle.net/y6qdf90v/

如果把笔画的粗细增加5倍，那么会是这样的

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" color="red">
  <polygon fill="none" stroke-width="20" stroke="red" points="171.14 230.86,200 171.14,230.86 230.86"></polygon>
</svg>

https://jsfiddle.net/y6qdf90v/1/

有什么办法可以避免三角形向外扩展？因此，随着厚度的增加，尺寸只会在内部增加。以及如何理解三角形可用的最大线宽是多少？

什么公式可以用来重新计算多边形的位置？这是关于svg 1.1的。我读到 svg 1.2 支持某种属性，但该选项不适合。

有这样一个svg - 这是一个简单的二维码。viewBox 可以是任意的，具体取决于文本的大小和 QRCorrectLevel 的值。

<svg version="1.2" baseProfile="tiny" viewBox="0 0 23 23" fill="#000000"><rect x="0" y="0" width="23" height="23" fill="#ffffff" style="fill: #ffffff !important"></rect><rect x="1" y="1" width="1" height="1"></rect><rect x="2" y="1" width="1" height="1"></rect><rect x="3" y="1" width="1" height="1"></rect><rect x="4" y="1" width="1" height="1"></rect><rect x="5" y="1" width="1" height="1"></rect><rect x="6" y="1" width="1" height="1"></rect><rect x="7" y="1" width="1" height="1"></rect><rect x="9" y="1" width="1" height="1"></rect><rect x="10" y="1" width="1" height="1"></rect><rect x="15" y="1" width="1" height="1"></rect><rect x="16" y="1" width="1" height="1"></rect><rect x="17" y="1" width="1" height="1"></rect><rect x="18" y="1" width="1" height="1"></rect><rect x="19" y="1" width="1" height="1"></rect><rect x="20" y="1" width="1" height="1"></rect><rect x="21" y="1" width="1" height="1"></rect><rect x="1" y="2" width="1" height="1"></rect><rect x="7" y="2" width="1" height="1"></rect><rect x="9" y="2" width="1" height="1"></rect><rect x="10" y="2" width="1" height="1"></rect><rect x="11" y="2" width="1" height="1"></rect><rect x="13" y="2" width="1" height="1"></rect><rect x="15" y="2" width="1" height="1"></rect><rect x="21" y="2" width="1" height="1"></rect><rect x="1" y="3" width="1" height="1"></rect><rect x="3" y="3" width="1" height="1"></rect><rect x="4" y="3" width="1" height="1"></rect><rect x="5" y="3" width="1" height="1"></rect><rect x="7" y="3" width="1" height="1"></rect><rect x="12" y="3" width="1" height="1"></rect><rect x="13" y="3" width="1" height="1"></rect><rect x="15" y="3" width="1" height="1"></rect><rect x="17" y="3" width="1" height="1"></rect><rect x="18" y="3" width="1" height="1"></rect><rect x="19" y="3" width="1" height="1"></rect><rect x="21" y="3" width="1" height="1"></rect><rect x="1" y="4" width="1" height="1"></rect><rect x="3" y="4" width="1" height="1"></rect><rect x="4" y="4" width="1" height="1"></rect><rect x="5" y="4" width="1" height="1"></rect><rect x="7" y="4" width="1" height="1"></rect><rect x="9" y="4" width="1" height="1"></rect><rect x="10" y="4" width="1" height="1"></rect><rect x="11" y="4" width="1" height="1"></rect><rect x="12" y="4" width="1" height="1"></rect><rect x="13" y="4" width="1" height="1"></rect><rect x="15" y="4" width="1" height="1"></rect><rect x="17" y="4" width="1" height="1"></rect><rect x="18" y="4" width="1" height="1"></rect><rect x="19" y="4" width="1" height="1"></rect><rect x="21" y="4" width="1" height="1"></rect><rect x="1" y="5" width="1" height="1"></rect><rect x="3" y="5" width="1" height="1"></rect><rect x="4" y="5" width="1" height="1"></rect><rect x="5" y="5" width="1" height="1"></rect><rect x="7" y="5" width="1" height="1"></rect><rect x="10" y="5" width="1" height="1"></rect><rect x="11" y="5" width="1" height="1"></rect><rect x="15" y="5" width="1" height="1"></rect><rect x="17" y="5" width="1" height="1"></rect><rect x="18" y="5" width="1" height="1"></rect><rect x="19" y="5" width="1" height="1"></rect><rect x="21" y="5" width="1" height="1"></rect><rect x="1" y="6" width="1" height="1"></rect><rect x="7" y="6" width="1" height="1"></rect><rect x="11" y="6" width="1" height="1"></rect><rect x="15" y="6" width="1" height="1"></rect><rect x="21" y="6" width="1" height="1"></rect><rect x="1" y="7" width="1" height="1"></rect><rect x="2" y="7" width="1" height="1"></rect><rect x="3" y="7" width="1" height="1"></rect><rect x="4" y="7" width="1" height="1"></rect><rect x="5" y="7" width="1" height="1"></rect><rect x="6" y="7" width="1" height="1"></rect><rect x="7" y="7" width="1" height="1"></rect><rect x="9" y="7" width="1" height="1"></rect><rect x="11" y="7" width="1" height="1"></rect><rect x="13" y="7" width="1" height="1"></rect><rect x="15" y="7" width="1" height="1"></rect><rect x="16" y="7" width="1" height="1"></rect><rect x="17" y="7" width="1" height="1"></rect><rect x="18" y="7" width="1" height="1"></rect><rect x="19" y="7" width="1" height="1"></rect><rect x="20" y="7" width="1" height="1"></rect><rect x="21" y="7" width="1" height="1"></rect><rect x="9" y="8" width="1" height="1"></rect><rect x="11" y="8" width="1" height="1"></rect><rect x="1" y="9" width="1" height="1"></rect><rect x="3" y="9" width="1" height="1"></rect><rect x="4" y="9" width="1" height="1"></rect><rect x="6" y="9" width="1" height="1"></rect><rect x="7" y="9" width="1" height="1"></rect><rect x="8" y="9" width="1" height="1"></rect><rect x="11" y="9" width="1" height="1"></rect><rect x="15" y="9" width="1" height="1"></rect><rect x="18" y="9" width="1" height="1"></rect><rect x="20" y="9" width="1" height="1"></rect><rect x="21" y="9" width="1" height="1"></rect><rect x="1" y="10" width="1" height="1"></rect><rect x="2" y="10" width="1" height="1"></rect><rect x="3" y="10" width="1" height="1"></rect><rect x="4" y="10" width="1" height="1"></rect><rect x="5" y="10" width="1" height="1"></rect><rect x="11" y="10" width="1" height="1"></rect><rect x="13" y="10" width="1" height="1"></rect><rect x="16" y="10" width="1" height="1"></rect><rect x="18" y="10" width="1" height="1"></rect><rect x="19" y="10" width="1" height="1"></rect><rect x="21" y="10" width="1" height="1"></rect><rect x="3" y="11" width="1" height="1"></rect><rect x="5" y="11" width="1" height="1"></rect><rect x="6" y="11" width="1" height="1"></rect><rect x="7" y="11" width="1" height="1"></rect><rect x="8" y="11" width="1" height="1"></rect><rect x="9" y="11" width="1" height="1"></rect><rect x="10" y="11" width="1" height="1"></rect><rect x="13" y="11" width="1" height="1"></rect><rect x="14" y="11" width="1" height="1"></rect><rect x="15" y="11" width="1" height="1"></rect><rect x="16" y="11" width="1" height="1"></rect><rect x="17" y="11" width="1" height="1"></rect><rect x="20" y="11" width="1" height="1"></rect><rect x="21" y="11" width="1" height="1"></rect><rect x="9" y="12" width="1" height="1"></rect><rect x="13" y="12" width="1" height="1"></rect><rect x="14" y="12" width="1" height="1"></rect><rect x="18" y="12" width="1" height="1"></rect><rect x="20" y="12" width="1" height="1"></rect><rect x="1" y="13" width="1" height="1"></rect><rect x="4" y="13" width="1" height="1"></rect><rect x="7" y="13" width="1" height="1"></rect><rect x="9" y="13" width="1" height="1"></rect><rect x="12" y="13" width="1" height="1"></rect><rect x="14" y="13" width="1" height="1"></rect><rect x="17" y="13" width="1" height="1"></rect><rect x="18" y="13" width="1" height="1"></rect><rect x="20" y="13" width="1" height="1"></rect><rect x="9" y="14" width="1" height="1"></rect><rect x="10" y="14" width="1" height="1"></rect><rect x="14" y="14" width="1" height="1"></rect><rect x="16" y="14" width="1" height="1"></rect><rect x="18" y="14" width="1" height="1"></rect><rect x="20" y="14" width="1" height="1"></rect><rect x="1" y="15" width="1" height="1"></rect><rect x="2" y="15" width="1" height="1"></rect><rect x="3" y="15" width="1" height="1"></rect><rect x="4" y="15" width="1" height="1"></rect><rect x="5" y="15" width="1" height="1"></rect><rect x="6" y="15" width="1" height="1"></rect><rect x="7" y="15" width="1" height="1"></rect><rect x="9" y="15" width="1" height="1"></rect><rect x="10" y="15" width="1" height="1"></rect><rect x="14" y="15" width="1" height="1"></rect><rect x="15" y="15" width="1" height="1"></rect><rect x="17" y="15" width="1" height="1"></rect><rect x="18" y="15" width="1" height="1"></rect><rect x="19" y="15" width="1" height="1"></rect><rect x="1" y="16" width="1" height="1"></rect><rect x="7" y="16" width="1" height="1"></rect><rect x="9" y="16" width="1" height="1"></rect><rect x="11" y="16" width="1" height="1"></rect><rect x="12" y="16" width="1" height="1"></rect><rect x="13" y="16" width="1" height="1"></rect><rect x="14" y="16" width="1" height="1"></rect><rect x="15" y="16" width="1" height="1"></rect><rect x="18" y="16" width="1" height="1"></rect><rect x="19" y="16" width="1" height="1"></rect><rect x="1" y="17" width="1" height="1"></rect><rect x="3" y="17" width="1" height="1"></rect><rect x="4" y="17" width="1" height="1"></rect><rect x="5" y="17" width="1" height="1"></rect><rect x="7" y="17" width="1" height="1"></rect><rect x="10" y="17" width="1" height="1"></rect><rect x="12" y="17" width="1" height="1"></rect><rect x="15" y="17" width="1" height="1"></rect><rect x="19" y="17" width="1" height="1"></rect><rect x="20" y="17" width="1" height="1"></rect><rect x="21" y="17" width="1" height="1"></rect><rect x="1" y="18" width="1" height="1"></rect><rect x="3" y="18" width="1" height="1"></rect><rect x="4" y="18" width="1" height="1"></rect><rect x="5" y="18" width="1" height="1"></rect><rect x="7" y="18" width="1" height="1"></rect><rect x="9" y="18" width="1" height="1"></rect><rect x="10" y="18" width="1" height="1"></rect><rect x="14" y="18" width="1" height="1"></rect><rect x="17" y="18" width="1" height="1"></rect><rect x="18" y="18" width="1" height="1"></rect><rect x="20" y="18" width="1" height="1"></rect><rect x="1" y="19" width="1" height="1"></rect><rect x="3" y="19" width="1" height="1"></rect><rect x="4" y="19" width="1" height="1"></rect><rect x="5" y="19" width="1" height="1"></rect><rect x="7" y="19" width="1" height="1"></rect><rect x="9" y="19" width="1" height="1"></rect><rect x="12" y="19" width="1" height="1"></rect><rect x="14" y="19" width="1" height="1"></rect><rect x="17" y="19" width="1" height="1"></rect><rect x="19" y="19" width="1" height="1"></rect><rect x="1" y="20" width="1" height="1"></rect><rect x="7" y="20" width="1" height="1"></rect><rect x="10" y="20" width="1" height="1"></rect><rect x="11" y="20" width="1" height="1"></rect><rect x="12" y="20" width="1" height="1"></rect><rect x="13" y="20" width="1" height="1"></rect><rect x="15" y="20" width="1" height="1"></rect><rect x="17" y="20" width="1" height="1"></rect><rect x="18" y="20" width="1" height="1"></rect><rect x="21" y="20" width="1" height="1"></rect><rect x="1" y="21" width="1" height="1"></rect><rect x="2" y="21" width="1" height="1"></rect><rect x="3" y="21" width="1" height="1"></rect><rect x="4" y="21" width="1" height="1"></rect><rect x="5" y="21" width="1" height="1"></rect><rect x="6" y="21" width="1" height="1"></rect><rect x="7" y="21" width="1" height="1"></rect><rect x="9" y="21" width="1" height="1"></rect><rect x="10" y="21" width="1" height="1"></rect><rect x="11" y="21" width="1" height="1"></rect><rect x="12" y="21" width="1" height="1"></rect><rect x="13" y="21" width="1" height="1"></rect><rect x="16" y="21" width="1" height="1"></rect></svg>

还有另一个带有viewBox="0 0 500 500"的“ svg ”元素。据我所知，您只能使用“图像”将svg插入另一个svg ，但这不是最方便的选择，您必须先将图像记录在服务器上，目标是动态地将二维码插入另一个svg具有不同 viewBox 值的元素。

如果你尝试将第一个svg（用g替换svg）插入第二个，那么坐标自然会有问题。

也许还有其他一些方法可以将一个 svg 嵌入到另一个中，或者轻松地重新计算新 viewBox 的坐标？

http://sqlfiddle.com/#!9/aef5ce/7

该示例对表运行 2 个查询。请求是一样的，不同的只是条件中的format_id值。

在第一个中，我们正在寻找 format_id = 999（不在表中）或 NULL，在第二个中，我们正在寻找 format = 1（在表中）或 NULL。

我们如何转换这些查询，以便如果我们在表中设置现有的 format_id，只返回带有它的行（NULL 被忽略）。如果这不存在，那么 format_id = NULL 的数据被相应地拖动。

一般来说，我想用给定的 format_id = 1 返回（3 行而不是 6 行）

100 1 20
200 1 40
300 1 60

给定 format_id = 999（或任何其他不存在的值），现在作为第一个查询的结果显示在示例中的结果被返回（即 format_id = null 的行的值）。

有一个PDF 文件，RGB 颜色模型（标准名片示例的尺寸为90x50mm或 ~ 340x188px）。

有一项任务可以将其转换为 JPG。但同时，重要的是输出图像也是90x50mm或 ~ 340x188px。

如果您尝试将文件驱动到任何在线转换器，那么由于某种原因，它们都会更改图像大小，尽管 PDF 显然是 90 x 50。

在本地我尝试过使用 Ghostscript，我尝试过使用 ImageMagick 转换器，我尝试过使用其他实用程序。没有人能胜任这项任务。

真的没有有效的解决方案还是我做错了什么？

这是一个示例的 gs 批处理文件代码：

C:\"Program Files"\gs\gs9.27\bin\gswin64c.exe ^
 -sDEVICE=jpegcmyk ^
 -sColorConversionStrategy=CMYK ^
 -sColorConversionStrategyForImages=CMYK ^
 -dNOPAUSE ^
 -dBATCH ^
 -dJPEGQ=100 ^
 -r300 ^
 -o %~2 ^
  %~1  

此代码返回 1108 x 638 JPG。如果未添加 -r300，则返回 266 x 133 文件。-r100 给出 369 x 213 的大小。

我知道 -g 你可以写 -g340x188，但它没有按应有的方式进行切割。如果您将 -g340x188 与 -r300 一起使用，那么它会给出一张空白图片。也许还有一些额外的东西。这个参数？

如何从 PDF 转换为 JPG（至少 RGB），但同时 JPG 大小为 1 合 1 与 100% PDF 大小相同？不管我怎么努力，我都做不到。没有一项服务能够完成这项任务。

附PDF（可能分享服务也改变大小，我不知道，这只是一个例子）：https ://www.docdroid.net/xtvj4bB/pdf-dlya-testa.pdf

我尝试了一堆不同的 PDF。转换为 JPG 时，大小总是会发生变化。

数据库中有某些记录（mysql，但不重要），它们是逐页显示或通过ajax加载的（这在任务中无关紧要）。

根据评分显示条目（按降序排列）。资源用户可以更改记录等级。

在移动到另一个页面或加载新页面时避免重复记录输出的最佳方法是什么？

例子。

假设我们在数据库中有以下记录列表：

条目 #1 - 评分 15

条目 #2 - 评分 14

条目 #3 - 评分 13

条目 #4 - 评分 12

条目 #5 - 评分 11

条目 #6 - 评分 0

假设页面一次显示 5 条记录。也就是说，当您第一次访问该页面时，我们将显示以下条目并按此顺序 - 第 1 号、第 2 号、第 3 号、第 4 号、第 5 号（按评分降序排列）。如果现在，当用户还在这个页面时，记录#6的评分改变了，比如变成20，那么记录#5会再次显示在第二页，这是不正确的。

解决此问题的最佳方法是什么？

我想到了一个变体，即每次传输已显示记录的数量和第二次 - 缓存，但两者似乎都不完全正确。他们如何在用户活跃度高的大型项目中解决此类问题？语言和数据库没有特别的作用，只有方法很有趣。

用户投票存储在单独的表中：

id user_id record_id 日期

记录表中分别记录：

身份证评分

有一个选项不将评分存储在记录表中，而是每次计算直到某个日期的投票数，但在我看来这种方法很糟糕，因为。将会有很大的负载，每次您都必须对所有可用记录进行排序。

我想知道如何进行用户密码恢复，但不使用数据库来存储为密码恢复链接生成的哈希值。也不可能以其他方式存储散列。

从基本条件：

1. 该链接仅对当前电子邮件和用户密码有效（更准确地说，对于密码哈希，因为只有它存储在数据库中）

2. 链接仅在创建后 24 小时内有效

如果没有第二点，那么可以简单地以某种方式从当前邮件和用户密码生成一个散列 + 从服务器端添加一些秘密字符，然后检查用户提供的散列。

但是第二点呢？如果我们在哈希中替换另一个时间戳，它将不起作用。

毕竟，如何正确地包含样式和 js 文件？

许多资料表明这是最正确的方法：css 在开头（在 head 中），js 在结尾，在关闭之前。但是当我查看 largest resources 是如何完成的时，结果到处都不一样，但是，据我了解，largest resources 首先关心站点加载速度。有人把一切都放在头脑里，有人做这个做那个。

或者有什么“陷阱”需要注意？这非常有趣。我自己总是把css放在最前面，所有的js放在最后。

最近mysql周期性的掉线。配置是标准的，自从安装 apache2 以来我没有去那里也没有改变任何东西。Ubuntu 14.04.1 LTS“Trusty Tahr”。

错误是这样的：

无法通过套接字“/var/lib/mysql/mysql.sock”连接到本地 MySQL 服务器 (111)

日志是空的，因为我没有尝试在那里至少找到一些东西，但那里总是空的。只有重新启动有帮助，但我已经厌倦了不断地重新启动 VDS。

WordPress 服务器上的一个站点，如果我在早上完全重新启动服务器，那么一切正常直到晚上，并且在一天结束时和 mysql 崩溃之前（大约一个小时），该站点启动无情地挂起并加载页面一分钟。

其余使用自写引擎并使用相同数据库的站点在 mysql 崩溃之前没有问题。

我联系了托管的技术支持，他们检查了，他们说机架工作正常。并且从来没有遇到过 sprinthost 的问题。

任何人都可以遇到吗？如何治疗？