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 фигуры: равносторонний треугольник, круг и прямоугольник. Также есть ползунки для изменения толщины обводки и изменения размера фигур. Между собой фигуры независимые. Как видно в примере, обводка фигур изменяется только внутрь. Внешняя обводка обрезается, спасибо за это mask элементу и @Alexandr_TT за помощь в этом решении, а также за альтернативное решение в этом же вопросе.
Но т.к. с масками/clip-path не всё идеально (подробнее о проблеме написано тут), то я ищу, вероятно, более сложное с точки зрения подхода, но более универсальное, решение, которое будет основано на математике и геометрии.
Ожидаю, что можно решить задачу для каждой фигуры, используя только один polygon, один rect и один circle соответственно. Без масок, без clip-path и других внешних элементов. То есть только пересчётом координат треугольника, ширины и высоты прямоугольника и радиуса круга.
Дополнительные ограничения:
- Координаты треугольника, начальный радиус или координаты центра круга, а также ширина и высота прямоугольника - произвольные. В примере их значения - просто пример. Треугольник всегда равносторонний (для упрощения).
- Нельзя менять viewBox, использовать css, маски и clip-path.
- Обводка ни при каких обстоятельствах не выступает за границы фигур.
- Обводкой можно полностью "заполнить" фон внутри фигуры.
- Обводка и размер фигур регулируется через ползунки.
- В самом SVG может быть множество различных других фигур и элементов, решение не должно на них влиять.
Вопрос: как это можно сделать?
Вот пример из которого убрано всё лишнее: https://jsfiddle.net/ru8fzeya/6/ Оставлены только фигуры и изменение толщины обводки/размера. Но стандартное поведение для stroke - расширение в обе стороны, а необходимо добиться такого же результата как в примере с масками, но без масок.